🤩 If you like this project, please support us by starring our GitHub repository 🤩

Tool Cool Range Slider
Tool Cool Range Slider on GitHub

Tool Cool Range Slider

Responsive range slider library written in typescript and using web component technologies.

Get Started

Responsive

Mobile Ready & Accessibility

Mobile-ready range slider that looks good on any devices. It accessible via ARIA-attributes, and supports touch, mousewheel events, and keyboard.

Learn more
Range Slider
<tc-range-slider
  value1="10"
  value2="50"
  value3="90">
</tc-range-slider>

Knobs

Any Number of Pointers

The library supports any number of pointers (knobs/handles): one-pointer range slider, two-pointers range slider, or as many as you need.

Learn more

Slider Type

Direction & Orientation

The library supports horizontal and vertical orientation. It also supports left to right and right to left directions for a horizontal slider, and top to bottom and bottom to top for vertical sliders.

Learn more
Range Slider
<tc-range-slider
  type="vertical"
  value1="30"
  value2="70">
</tc-range-slider>

<tc-range-slider
  rtl="true"
  value="50"
  generate-labels="true">
</tc-range-slider>

Data

Numbers, Text, or Range

The slider range can be defined by a minimum and maximum numbers. Another option is to provide a list of individual (discrete) values. Both text and numeric data are supported.

Learn more

Styles

Styles, Design, Animation

The library has multiple options for customizing the appearance of the slider. Width, height, border radius, colors, hover and focus, and other properties can be customized using the slider attributes. Images and SVGs can be used as pointers. It has a standalone moving tooltip plugin.

Learn more

Predefined Styles

Themes

The library has additional theme plugins with a ready-made set of styles such as gradients, glass, pointer shapes and more. It's also possible to develop your own theme as an external plugin.

Learn more

CSS Frameworks

No CSS Conflicts

Plays well with CSS frameworks like Bootstrap and others. No CSS conflicts with other styles due to the web components nature of the library.

Learn more

Advanced

Advanced Features

The slider has a large set of advanced features such as: the ability to disable the entire slider or individual knobs; range dragging support; non-linear range slider support; pointers overlap; pointers max and min distance, and more. Simple dynamic rendering after ajax requests or delays/timeouts. Origin at center plugin.

Learn more

Storage

Local & Session Storage

Local storage and session storage support as a standalone plugin. The user selection will be saved and restored after page refresh or navigation from other pages.

Learn more
Range Slider
<tc-range-slider
  value1="30"
  value2="70"
  storage="local-storage"
  generate-labels="true">
</tc-range-slider>
Range Slider
// get the reference
const $slider = document.getElementById('slider-1');

// listen to the change event
$slider.addEventListener('change', (evt) => {
  console.log(evt.detail.value);
});

// change value
$slider.value = 50;

// get value
console.log($slider.value);

No dependencies

ES6 & Typescript

The library is built with Typescript and does not use external dependencies. The core is 28KB minified or 9KB compressed (GZip).

Learn more

Development

API & Plugins

The library has a rich set of different APIs and events. Almost any property can be changed with JavaScript. The functionality of the core library can be extended using plugins. There are also several ready-made plugins, such as the auto-generated labels plugin.

Learn more

Free

MIT License

The library is free to use in any personal or commercial project.

Read License