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.

Here’s the default values, with a little tool to help you roll your own color setup.

/* Slider Ranges, Handles and Floats colors */

:root {
  --range-slider:          #d7dada; /* slider main background color */
  --range-handle-inactive: #99a2a2; /* inactive handle color */
  --range-handle:          #838de7; /* non-focussed handle color */
  --range-handle-focus:    #4a40d4; /* focussed handle color */
  --range-handle-border:   var(--range-handle); /* handle border color */
  --range-range-inactive:  var(--range-handle-inactive); /* inactive range bar background color */
  --range-range:           var(--range-handle-focus); /* active range background color */
  --range-float-inactive:  var(--range-handle-inactive); /* inactive floating label background color */
  --range-float:           var(--range-handle-focus); /* floating label background color */
  --range-float-text:      white; /* text color on floating label */
}
/* Slider Pips and Labels colors */

:root {
  --range-pip:                lightslategray; /* color of the base pips */
  --range-pip-text:           var(--range-pip); /* color of the base labels */
  --range-pip-active:         darkslategrey; /* active pips (when handle is on a slider-stop) */
  --range-pip-active-text:    var(--range-pip-active); /* active labels (when handle is on a slider-stop) */
  --range-pip-hover:          darkslategrey; /* when a slider-stop is hovered */
  --range-pip-hover-text:     var(--range-pip-hover); /* when a slider-stop is hovered */
  --range-pip-in-range:       var(--range-pip-active); /* pips inside the range */
  --range-pip-in-range-text:  var(--range-pip-active-text); /* labels inside the range */
}

Test the color variables

Color Variables for the Slider
70
20 40 60 80 100
Slider Range
Handles
Floating Labels
Pips & Labels
Active & Hover Pips
Pips & Labels in Range
<style>
  :root {
    --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-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%);
  }
</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

Changing the Font Size
16px
8 px 14 px 20 px 26 px 32 px
<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.vertical {}       /* if slider is vertical */
.rangeSlider.focus {}          /* if slider is focussed */
.rangeSlider.range {}          /* if slider is a range */
.rangeSlider.min {}            /* if slider is a min-range */
.rangeSlider.max {}            /* if slider is a max-range */
.rangeSlider.pips {}           /* if slider has visible pips */
.rangeSlider.pip-labels {}     /* if slider has labels for pips */
.rangeSlider.hoverable {}      /* if slider can trigger hover effects */
/* slider handles */
.rangeSlider > .rangeHandle {}                 /* positioned wrapper for the handle/float */
.rangeSlider > .rangeHandle.active {}          /* if a handle is active in any way */
.rangeSlider > .rangeHandle.press {}           /* 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 */
/* slider pips */
.rangeSlider > .rangePips {}                      /* the container element for the pips */
.rangeSlider > .rangePips.focus {}                /* if slider is focussed */
.rangeSlider > .rangePips.vertical {}             /* if slider is vertical */
.rangeSlider > .rangePips.hoverable {}            /* if the pips allow hover effect */
.rangeSlider > .rangePips > .pip {}               /* an individual pip */
.rangeSlider > .rangePips > .pip.first {}         /* the first pip on the slider */
.rangeSlider > .rangePips > .pip.last {}          /* the last pip on the slider */
.rangeSlider > .rangePips > .pip[data-val="0"] {} /* the pip with the value of 0 */
.rangeSlider > .rangePips > .pip.selected {}      /* if a pip is currently selected */
.rangeSlider > .rangePips > .pip.in-range {}      /* if a pip is between the min and max */
.rangeSlider > .rangePips > .pip > .pipVal {}     /* the label for the pip */

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