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>

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>

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>

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>

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>