#
Custom CSS Theme

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

- Create a new CSS file my-theme.css.
- Each CSS rule should start with .theme- prefix.
- Use the CSS variables from here to change the look of the slider.
- Add theme attribute to the slider. For example, if your CSS rule is .theme-example, then you need to pass theme=“example” attribute to the slider.
- Add your CSS file to the slider using css links.

##
The complete example

example.css

    .theme-example{
      --panel-bg: #D7DCDF;
      --panel-bg-hover: #ccd1d3;
      --panel-bg-fill: #47a4bc;

      --pointer-bg: #1aa4bc;
      --pointer-bg-hover: #0f7b8c;
      --pointer-bg-focus: #0f7b8c;

      --pointer-shadow: 0 0 0 3px #fff, 0 0 0 6px #1aa4bc;
      --pointer-shadow-hover: 0 0 0 3px #fff, 0 0 0 6px #0f7b8c;
      --pointer-shadow-focus: 0 0 0 3px #fff, 0 0 0 6px #0f7b8c;

      --pointer-border: 0;
      --pointer-border-hover: 0;
      --pointer-border-focus: 0;
    }

HTML markup:

    <tc-range-slider
      theme="example"
      css-links="example.css"
      value1="30"
      value2="60"></tc-range-slider>

Previous
'Setters' Object Interface
Next
Pointer Shape Themes