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.

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>