#
Pointer Shapes Custom Themes

It’s possible to create your own pointer shape themes for the slider. It can be done as follows:

- Create a new CSS file my-pointer-shapes.css.
- Each CSS rule should start with .shape- prefix.
- Add pointer-shape attribute to the slider. For example, if your CSS rule is .shape-example, then you need to pass pointer-shape=“example” attribute to the slider.
- Add your CSS file to the slider using css links.

##
The complete example

my-pointer-shapes.css

    .shape-example{
        -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

HTML markup:

    <tc-range-slider
      pointer-shape="example"
      css-links="my-pointer-shapes.css"
      value1="30"
      value2="60"></tc-range-slider>

Previous
CSS Themes