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.