##
Width, Height, & Border Radius

By default, the slider width is 100% and the height is 0.25 rem. These values can be changed using the slider-width and slider-height properties:

    <tc-range-slider
           slider-width="290px"
           slider-height="0.9rem"
           generate-labels="true"></tc-range-slider>

The slider radius can be changed using the slider-radius attribute like this:

    <tc-range-slider
      slider-radius="0"

      value="50"
      slider-height="0.9rem"
      generate-labels="true"></tc-range-slider>

Pointer width, height, and border-radius can be change using pointer-width, pointer-height, and pointer-radius properties:

    <tc-range-slider
            value1="30"
            value2="60"
            pointer-width="35px"
            pointer-height="35px"
            pointer-radius="5px"></tc-range-slider>

You can also specify different styles for different pointers:

    <tc-range-slider
      value1="10"
      value2="40"
      value3="80"

      pointer1-width="10px"
      pointer1-height="10px"
      pointer1-radius="0"

      pointer2-width="20px"
      pointer2-height="20px"
      pointer2-radius="5px"

      pointer3-width="30px"
      pointer3-height="30px"
      pointer3-radius="100%"></tc-range-slider>

> 📌 An example page with the source code can be found here.

HTML Property | Default Value | API Property
--- | --- | ---
slider-width | 300px | sliderWidth
slider-height | 0.25rem | sliderHeight
slider-radius | 1rem | sliderRadius
pointer-width | 1rem | pointerWidth
pointer-height | 1rem | pointerHeight
pointer-radius | 100% | pointerRadius
pointer2-width | inherits pointer-width | pointer2Width
pointer2-height | inherits pointer-height | pointer2Height
pointer3-radius | inherits pointer-radius | pointer2Radius
pointer3-width | inherits pointer-width | pointer3Width
pointer3-height | inherits pointer-height | pointer3Height
pointer3-radius | inherits pointer-radius | pointer3Radius
etc… | … | …

Each property can also be changed via the API:

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

        // change properties
        $slider.sliderWidth = '200px';
        $slider.sliderHeight = '0.7rem';
        $slider.sliderRadius = 0;

        $slider.pointerWidth = '1.8rem';
        $slider.pointerHeight = '1.8rem';
        $slider.pointerRadius = 0;

        $slider.pointer2Width = '1.3rem';
        $slider.pointer2Height = '1.3rem';
        $slider.pointer2Radius = '1rem';

        // or
        // $slider.setAttribute('slider-width', '200px');
        // ...
    </script>

Previous
Marks Plugin
Next
Colors