Size

Because the Range Slider usesem units for therange, handles, floats and pips, you can easily change the sizeof the Slider by changing thefont-size of the base.rangeSlider element.

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

Test the font size

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

Setting the font-size on the base element will scale every part of theslider uniformly. But if you want to have different sizes for differentparts of the slider, you can adjust the sizes of each part independentlyusingthe css structure as a reference.

Colors

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

If you want to, you can also use theConfigurator tool to edit the functionality, aesthetics, theme and colors!

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:#b9c2c2;--slider-bg:#d7dada;--slider-fg:#3f3e4f;--slider-dark-accent:#6070fc;--slider-dark-accent-100:#7a7fab;--slider-dark-base:#82809f;--slider-dark-base-100:#595868;--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-100));--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>  #mySlider {    --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-hover:           hsl(234, 67.6%, 71%);    --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>

Structure

Below is a quick rundown of the main<html> elements thathave 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 theformatter() function,this could also be styled with css.

New Properties in v4

Style Prop

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

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

Class Prop

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

<RangeSliderclass="my-custom-slider" />

In v4, almost all CSS class names have been prefixed withrs to prevent conflicts with other frameworks.For example,.active is now.rsActive,.pip is now.rsPip, etc. See thestructure sectionfor the complete list of updated class names.