Pointer Shapes

Range slider pointers can be shaped differently using the standalone Pointer Shapes Plugin.

To use the plugin, download the latest tcrs-pointer-shapes.min.css file from GitHub and pass it to the slider using the css-links attribute. Then add the pointer-shape attribute as follows:

<tc-range-slider 
  pointer-shape="triangle"
  css-links="tcrs-themes.min.css"

  value1="30"
  value2="50"
  value3="70"
  
  pointer-width="35px"
  pointer-height="35px"
  
  pointer-bg="#b677d6"
  pointer-bg-hover="#763098"
  pointer-bg-focus="#763098"
>
</tc-range-slider>

You can also define different shapes for different pointers:

<tc-range-slider
  pointer1-shape="triangle"
  pointer2-shape="star"
  pointer3-shape="trapezoid"
  css-links="tcrs-themes.min.css"
  
  value1="10"
  value2="50"
  value3="90"
  
  pointer1-width="30px"
  pointer1-height="30px"
  
  pointer2-width="45px"
  pointer2-height="45px"

  pointer3-width="30px"
  pointer3-height="30px"
  
  pointer-bg="#b677d6"
  pointer-bg-hover="#763098"
  pointer-bg-focus="#763098"></tc-range-slider>

There are the following pointer shapes:

<tc-range-slider
  pointer1-shape="rhombus"
  pointer2-shape="parallelogram"
  css-links="tcrs-themes.min.css"
  
  value1="30"
  value2="60"
  
  pointer-width="35px"
  pointer-height="35px"
  
  pointer1-bg="#b677d6"
  pointer1-bg-hover="#763098"
  pointer1-bg-focus="#763098"
  
  pointer2-bg="#48b29e"
  pointer2-bg-hover="#2b8774"
  pointer2-bg-focus="#2b8774"></tc-range-slider>

<tc-range-slider
  pointer1-shape="trapezoid"
  pointer2-shape="right-arrow"
  css-links="tcrs-themes.min.css"
  
  value1="30"
  value2="60"
  
  pointer-width="35px"
  pointer-height="35px"
  
  pointer1-bg="#b677d6"
  pointer1-bg-hover="#763098"
  pointer1-bg-focus="#763098"
  
  pointer2-bg="#48b29e"
  pointer2-bg-hover="#2b8774"
  pointer2-bg-focus="#2b8774"></tc-range-slider>

Pointer shapes can also be changed via the API:

const $slider = document.querySelector('#slider');
$slider.pointerShape = 'rhombus';

// $slider.pointer2Shape = 'rhombus';
// $slider.pointer3Shape = 'rhombus';
// ....

// or
// $slider.setAttribute('pointer1-shape', 'rect');
// $slider.setAttribute('pointer2-shape', 'rect');
// ...

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