##
Colors

The library allows to customize the appearance of the slider, including colors, hover and focus states, shadows.

To change the slider background colors use the following attributes: slider-bg, slider-bg-hover, and slider-bg-fill.

    <tc-range-slider
        value="50"
        slider-height="0.9rem"

        slider-bg="red"
        slider-bg-hover="silver"
        slider-bg-fill="blue"></tc-range-slider>

HTML Attribute | Default Value | API Property
--- | --- | ---
slider-bg | #CBD5E1 | sliderBg
slider-bg-hover | #94A3B8 | sliderBgHover
slider-bg-fill | #47 | sliderBgFill

To change the pointer background colors use the following attributes: pointer-bg, pointer-bg-hover, and pointer-bg-focus.

    <tc-range-slider
        value="50"
        pointer-bg="silver"
        pointer-bg-hover="blue"
        pointer-bg-focus="red"></tc-range-slider>

HTML Attribute | Default Value | API Property
--- | --- | ---
pointer-bg | #fff | pointerBg
pointer-bg-hover | #dcdcdc | pointerBgHover
pointer-bg-focus | #dcdcdc | pointerBgFocus
pointer2-bg | #fff | pointer2Bg
pointer2-bg-hover | #dcdcdc | pointer2BgHover
pointer2-bg-focus | #dcdcdc | pointer2BgFocus
etc… | … | …

The pointer border can be customized using the following properties:

    <tc-range-slider
        value="50"
        pointer-border="1px solid red"
        pointer-border-hover="1px solid blue"
        pointer-border-focus="2px solid black"></tc-range-slider>

HTML Attribute | Default Value | API Property
--- | --- | ---
pointer-border | 1px solid hsla(0, 0%, 88%, 0.5) | pointerBorder
pointer-border-hover | 1px solid #94A3B8 | pointerBorderHover
pointer-border-focus | 1px solid #94A3B8 | pointerBorderFocus
pointer2-border | 1px solid hsla(0, 0%, 88%, 0.5) | pointer2Border
pointer2-border-hover | 1px solid #94A3B8 | pointer2BorderHover
pointer2-border-focus | 1px solid #94A3B8 | pointer2BorderFocus
etc… | … | …

The pointer shadow can be configured using pointer-shadow, pointer-shadow-hover, and pointer-shadow-focus attributes:

    <tc-range-slider
        value="50"
        pointer-shadow="0 0 5px blue"
        pointer-shadow-hover="0 0 5px red"
        pointer-shadow-focus="0 0 5px black"></tc-range-slider>

HTML Attribute | Default Value | API Property
--- | --- | ---
pointer-shadow | 0 0 2px rgba(0, 0, 0, 0.8) | pointerShadow
pointer-shadow-hover | 0 0 2px rgb(0, 0, 0) | pointerShadowHover
pointer-shadow-focus | 0 0 2px rgb(0, 0, 0) | pointerShadowFocus
pointer2-shadow | 0 0 2px rgba(0, 0, 0, 0.8) | pointer2Shadow
pointer2-shadow-hover | 0 0 2px rgb(0, 0, 0) | pointer2ShadowHover
pointer2-shadow-focus | 0 0 2px rgb(0, 0, 0) | pointer2ShadowFocus
etc… | … | …

By default, all pointers inherit the same styles. But it is possible to configure each pointer individually:

    <tc-range-slider
        value1="10"
        value2="50"
        value3="90"

        pointer1-bg="red"
        pointer1-border="none"

        pointer2-bg="green"
        pointer2-border="none"

        pointer3-bg="blue"
        pointer3-border="none"></tc-range-slider>

Each property can be changed via the API as follows:

    <tc-range-slider
      id="slider-1"
      value1="10"
      value2="50"
      value3="90"></tc-range-slider>

    <script src="toolcool-range-slider.min.js"></script>

    <script>
        // get the reference
        const $slider = document.getElementById('slider-1');

        // change properties
        $slider.sliderBg = '#efefef';
        $slider.sliderBgHover = '#ddd';
        $slider.sliderBgFill = '#ccc';

        $slider.pointer1Bg = 'red';
        $slider.pointer2Bg = 'green';
        $slider.pointer3Bg = 'blue';

        $slider.pointer1Border = 'none';
        $slider.pointer2Border = 'none';
        $slider.pointer3Border = 'none';

        // or
        // $slider.setAttribute('slider-bg', '#efefef');
        // ...
    </script>

Previous
Width, Height, & Border Radius
Next
CSS Links