##
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:

Shapes
triangle
star
rhombus
trapezoid
parallelogram
right-arrow

    <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.

Previous
Themes
Next
Images & SVGs as pointers