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

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

Previous
CSS Links
Next
Pointer Shapes