Styling

Colors

The Range Slider comes out of the box with a set style, and it’s colored using CSS variables. You can override these variables to change the color of the Slider.

Base Theme Variables

The component uses a comprehensive set of CSS variables for theming, wrapped in @layer base to prevent conflicts with CSS frameworks like Tailwind:

@layer base {
  :global(.rangeSlider) {
    /* Light theme base colors */
    --slider-accent: #4a40d4;
    --slider-accent-100: #838de7;
    --slider-base: #99a2a2;
    --slider-base-100: #aebecf;
    --slider-base-200: #b9c2c2;
    --slider-bg: #d7dada;
    --slider-fg: #3f3e4f;

    /* Dark theme base colors */
    --slider-dark-accent: #6070fc;
    --slider-dark-accent-100: #7a7fab;
    --slider-dark-base: #82809f;
    --slider-dark-base-100: #595970;
    --slider-dark-base-200: #454454;
    --slider-dark-bg: #3f3e4f;
    --slider-dark-fg: #d7dada;

    /* Component-specific colors with fallbacks */
    --slider: var(--range-slider, var(--slider-bg));
    --handle-inactive: var(--range-handle-inactive, var(--slider-base));
    --handle: var(--range-handle, var(--slider-accent-100));
    --handle-focus: var(--range-handle-focus, var(--slider-accent));
    --handle-border: var(--range-handle-border, var(--handle));
    --range-inactive: var(--range-range-inactive, var(--handle-inactive));
    --range: var(--range-range, var(--handle-focus));
    --range-limit: var(--range-range-limit, var(--slider-base-200));
    --range-hover: var(--range-range-hover, var(--handle-border));
    --range-press: var(--range-range-press, var(--handle-border));
    --float-inactive: var(--range-float-inactive, var(--handle-inactive));
    --float: var(--range-float, var(--handle-focus));
    --float-text: var(--range-float-text, white);
  }
}

So to make it super-easy to override colors for specific parts of the slider, you can use the ‘component-specific’ variables from above.

For example, if I want to change the range background color. I would override the --range-range variable. Because the element uses --range, which in turn looks for --range-range. If --range-range is not set, it will fall back to --handle-focus color (see above).

.rangeSlider {
  --range-range: #000;
}
@media (prefers-color-scheme: dark) {
  .rangeSlider.rsAutoDark {
    --range-range: #FFF;
  }
}

But if I wanted to modify the accent color only, I would change the --slider-accent, and/or --slider-dark-accent variables.

.rangeSlider {
  --slider-accent: #000;
  --slider-dark-accent: #FFF;
}

Test the color variables

<style>
  .variables {
    --range-slider:            hsl(180, 3.9%, 84.9%);
    --range-handle-inactive:   hsl(180, 4.6%, 61.8%);
    --range-handle:            hsl(234, 67.6%, 71%);
    --range-handle-focus:      hsl(244.1, 63.2%, 54.1%);
    --range-handle-border:     hsl(234, 67.6%, 71%);
    --range-range-inactive:    hsl(180, 4.6%, 61.8%);
    --range-range:             hsl(244.1, 63.2%, 54.1%);
    --range-range-limit:       hsl(180, 6.9%, 74.3%);
    --range-float-inactive:    hsl(180, 4.6%, 61.8%);
    --range-float:             hsl(244.1, 63.2%, 54.1%);
    --range-float-text:        hsl(0, 0%, 100%);

    --range-pip:               hsl(210, 14.3%, 53.3%);
    --range-pip-text:          hsl(210, 14.3%, 53.3%);
    --range-pip-active:        hsl(180, 25.4%, 24.7%);
    --range-pip-active-text:   hsl(180, 25.4%, 24.7%);
    --range-pip-hover:         hsl(180, 25.4%, 24.7%);
    --range-pip-hover-text:    hsl(180, 25.4%, 24.7%);
    --range-pip-in-range:      hsl(180, 25.4%, 24.7%);
    --range-pip-in-range-text: hsl(180, 25.4%, 24.7%);
    --range-pip-out-of-limit:      hsl(210.9, 25.6%, 74.7%);
    --range-pip-out-of-limit-text: hsl(210.9, 25.6%, 74.7%);
  }
</style>

Size

Because the Range Slider uses em units for the range, handles, floats and pips, you can easily change the size of the Slider by changing the font-size of the base .rangeSlider element.

.rangeSlider {
  font-size: 1rem; /* default size */
}

Test the font size

<style>
  #sizeExample .rangeSlider {
    font-size: 16px;
  }
</style>

Structure

Below is a quick rundown of the main <html> elements that have classes applied, allowing them to be modified with css.

/* main slider element */
.rangeSlider {}                /* the main slider background track */
.rangeSlider.rsVertical {}     /* if slider is vertical */
.rangeSlider.rsFocus {}        /* if slider is focussed */
.rangeSlider.rsRange {}        /* if slider is a range */
.rangeSlider.rsMin {}          /* if slider is a min-range */
.rangeSlider.rsMax {}          /* if slider is a max-range */
.rangeSlider.rsPips {}         /* if slider has visible pips */
.rangeSlider.rsPipLabels {}    /* if slider has labels for pips */
.rangeSlider.rsHoverable {}    /* if slider can trigger hover effects */

/* slider handles */
.rangeSlider > .rangeHandle {}                 /* positioned wrapper for the handle/float */
.rangeSlider > .rangeHandle.rsActive {}        /* if a handle is active in any way */
.rangeSlider > .rangeHandle.rsPress {}         /* if a handle is being pressed down */
.rangeSlider > .rangeHandle > .rangeNub {}     /* the actual nub rendered as a handle */
.rangeSlider > .rangeHandle > .rangeFloat {}   /* the floating value above the handle */

/* slider range */
.rangeSlider > .rangeBar {}                    /* the range between the two handles */
.rangeSlider > .rangeBar > .rangeFloat {}      /* the floating value above the range */

/* slider limits */
.rangeSlider > .rangeLimit {}                  /* the limited area that can be selected */

/* slider pips */
.rangeSlider > .rangePips {}                        /* the container element for the pips */
.rangeSlider > .rangePips.rsFocus {}                /* if slider is focussed */
.rangeSlider > .rangePips.rsVertical {}             /* if slider is vertical */
.rangeSlider > .rangePips.rsHoverable {}            /* if the pips allow hover effect */
.rangeSlider > .rangePips > .rsPip {}               /* an individual pip */
.rangeSlider > .rangePips > .rsPip--first {}        /* the first pip on the slider */
.rangeSlider > .rangePips > .rsPip--last {}         /* the last pip on the slider */
.rangeSlider > .rangePips > .rsPip[data-val="0"] {} /* the pip with the value of 0 */
.rangeSlider > .rangePips > .rsPip.rsSelected {}    /* if a pip is currently selected */
.rangeSlider > .rangePips > .rsPip.rsInRange {}     /* if a pip is between the min and max */
.rangeSlider > .rangePips > .rsPip.rsOutOfLimit {}  /* if a pip is outside of the limit */
.rangeSlider > .rangePips > .rsPip > .rsPipVal {}   /* the label for the pip */

Additionally, if you supply and custom html to the formatter() function, this could also be styled with css.

New Properties in v4

Style Prop

The new style prop allows you to directly pass CSS variables to the slider:

<RangeSlider
  style="
    --slider-accent: #0ea5e9;
    --slider-bg: #e2e8f0;
  "
/>

Class Prop

The new class prop allows you to add custom CSS classes to the slider:

<RangeSlider class="my-custom-slider" />