##
Images and SVGs as pointers

Images and SVG can be used as pointers using pointer-bg, pointer-bg-hover, and pointer-bg-focus attributes, like this:

    <tc-range-slider
      value1="30"
      value2="70"

      pointer-width="2rem"
      pointer-height="2rem"

      slider-bg="#6AD3BA"
      slider-bg-hover="#3F8A8A"
      slider-bg-fill="#378c8a"

      pointer-bg="#fff url(/path/image.png) no-repeat 50% 50%"
      pointer-bg-hover="#c6f7eb url(/path/image.png) no-repeat 50% 50%"
      pointer-bg-focus="#c6f7eb url(/path/image.png) no-repeat 50% 50%">
    </tc-range-slider>

>

> You may use path to image file or path to svg file in the pointer-bg attributes.

If you need to disable all default styles, you can do it like this:

    <tc-range-slider
      value1="30"
      value2="70"

      pointer-width="2rem"
      pointer-height="2rem"

      slider-bg="#6AD3BA"
      slider-bg-hover="#3F8A8A"
      slider-bg-fill="#378c8a"

      pointer-bg="transparent url(/path/image.png) no-repeat 50% 50%"
      pointer-bg-hover="transparent url(/path/image.png) no-repeat 50% 50%"
      pointer-bg-focus="transparent url(/path/image.png) no-repeat 50% 50%"

      pointer-radius="0"
      pointer-border="none"
      pointer-border-hover="none"
      pointer-border-focus="none"
      pointer-shadow="none"
      pointer-shadow-hover="none"
      pointer-shadow-focus="none">
    </tc-range-slider>

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

Previous
Pointer Shapes
Next
Animation