Themes (Predefined Styles)

The slider has several predefined themes that can be loaded using a standalone plugin. Each theme defines a unique look-and-feel and can be used “as is” without defining each style parameter separately. The slider has the following themes: target, glass, rect, circle, rainbow, ruler.

To use themes, download the latest tcrs-themes.min.css file from GitHub. Then use the css-links attribute to pass it to the slider:

<tc-range-slider
  theme="target"
  css-links="tcrs-themes.min.css"
  value1="30"
  value2="60"></tc-range-slider>

<tc-range-slider
  theme="glass"
  css-links="tcrs-themes.min.css"
  value1="30"
  value2="60"></tc-range-slider>

<tc-range-slider
  theme="rect"
  css-links="tcrs-themes.min.css"
  value1="30"
  value2="60"></tc-range-slider>

<tc-range-slider
  theme="circle"
  css-links="tcrs-themes.min.css"
  value1="30"
  value2="60"></tc-range-slider>

<tc-range-slider
  theme="rainbow"
  css-links="tcrs-themes.min.css"
  value1="30"
  value2="60"></tc-range-slider>

<tc-range-slider
  theme="ruler"
  css-links="tcrs-themes.min.css"
  value1="30"
  value2="60"></tc-range-slider>

All themes can be combined with standard style attributes such as slider-bg, slider-bg-hover, etc. For example, we can use the target theme and at the same time set other styles for the second pointer:

<tc-range-slider
  theme="target"
  css-links="tcrs-themes.min.css"
  
  value1="30"
  value2="60"

  pointer2-bg="red"
  pointer2-bg-hover="red"
  pointer2-bg-focus="red"></tc-range-slider>

Theme property can also be changed via the API:

<tc-range-slider id="slider-1"></tc-range-slider>
<script src="toolcool-range-slider.min.js"></script>

<script>
    // get the reference
    const $slider = document.getElementById('slider-1');

    // change theme
    $slider.theme = 'rect';

    // or
    // $slider.setAttribute('theme', 'rect');
</script>

TypeScript example:

<script>
    // get the reference
    const $slider = document.getElementById('slider-1') as RangeSlider;

    // change theme
    $slider.theme = 'glass';

    // or
    // $slider.setAttribute('theme', 'glass');
</script>

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

📌 An example with a dark background can be found here.