Author: | toolcool-org |
---|---|
Views Total: | 58 views |
Official Page: | Go to website |
Last Update: | May 15, 2023 |
License: | MIT |
Preview:

Description:
It’s pretty common to have a slider on your website that you can drag a handle to change its value.
This ToolCool Range Slider web component has been built with modern web development techniques and requires no third-party libraries like jQuery.
The purpose of this project is to create a slider that is versatile enough for use on any project, powerful enough to handle any type of data, creates intuitive user interactions, and looks nice.
It works perfectly on mobile devices using touch interactions and the fingering concept.
Features:
- Custom styles.
- 5 pre-built themes.
- Supports both horizontal and vertical layouts.
- Local & Session storage.
- Supports ARIA attributes.
- Mobile friendly.
- Touch & Keyboard interactions.
- And much more.
How to use it:
1. Download and import the ToolCool Range Slider.
<script src="js/toolcool-range-slider.min.js"></script>
2. Create a basic range slider.
<toolcool-range-slider></toolcool-range-slider> // OR <tc-range-slider></tc-range-slider>
3. It supports native HTML5 attributes like min, max, value, and step.
<toolcool-range-slider min="10" max="1000" value1="300" value2="200" round="2" step="20"> </toolcool-range-slider>
4. Change the direction to ‘Vertical’.
<toolcool-range-slider type="vertical"> </toolcool-range-slider>
5. Available themes:
- target
- glass
- rect
- circle
- gradient
- ruler
<toolcool-range-slider theme="rect"> </toolcool-range-slider>
6. Generate a label (or labels) for the range slider.
<script src="tcrs-binding-labels.min.js"></script> <script src="toolcool-range-slider.min.js"></script>
<tc-range-slider value-label="#value-1"></tc-range-slider> <div id="value-1"></div>
// OR <tc-range-slider generate-labels="true"></tc-range-slider>
7. It supports any data type, not only numeric values:
<tc-range-slider data="a, b, c, d, e, f, g" value="d" generate-labels="true"> </tc-range-slider>
8. RTL is supported as well.
<tc-range-slider rtl="true" value1="10" value2="50" generate-labels="true"> </tc-range-slider>
9. Animate the range slider on click.
<tc-range-slider animate-onclick="2s" value="50" generate-labels="true"> </tc-range-slider>
10. Disable/enable touch/keyboard support.
<tc-range-slider keyboard-disabled="true"></tc-range-slider>
11. Add ARIA-attributes to the range slider for better accessibility.
- aria-orientation
- aria-valuemin
- aria-valuemax
- aria-valuenow
- aria-valuetext
<tc-range-slider value1="10" value2="50" value3="90" aria-label1="lower" aria-label2="middle" aria-label3="upper"> </tc-range-slider>
12. Save the current selection in the local or session storage.
<script src="tcrs-storage.min.js"></script> <script src="toolcool-range-slider.min.js"></script>
<tc-range-slider value1="30" value2="70" storage="session-storage" storage-key="tc-range-slider-1" generate-labels="true"> </tc-range-slider>
13. Determine whether to allow range dragging.
<tc-range-slider range-dragging="true" value1="30" value2="70" generate-labels="true" round="0"> </tc-range-slider>
14. Determine whether to allow pointer overlapping.
<tc-range-slider pointers-overlap="true" value1="30" value2="50" value3="70" generate-labels="true" round="0"> </tc-range-slider>
15. Define the minimum/maximum required distance between the pointers.
<tc-range-slider pointers-min-distance="10" value1="30" value2="60" generate-labels="true" round="0"> </tc-range-slider>
<tc-range-slider pointers-max-distance="50" value1="30" value2="60" generate-labels="true" round="0"> </tc-range-slider>
16. Override the default styles of the range slider using the following attributes:
- slider-width
- slider-height
- slider-radius
- pointer-width
- pointer-height
- pointer-radius
- pointer2-width
- pointer2-height
- pointer2-radius
- slider-bg
- slider-bg-hover
- slider-bg-fill
- pointer-bg (supports bg images)
- pointer-bg-hover
- pointer-bg-focus
- pointer-shadow
- pointer-shadow-hover
- pointer-shadow-focus
- pointer-borde
- pointer-border-hover
- pointer-border-focus
- pointer2-bg
- pointer2-bg-hover
- pointer2-bg-focus
- pointer2-shadow
- pointer2-shadow-hover
- pointer2-shadow-focus
- pointer2-borde
- pointer2-border-hover
- pointer2-border-focus
<toolcool-range-slider slider-width="300px" slider-height="0.25rem" slider-radius="1rem" pointer-width="1rem" pointer-height="1rem" pointer-radius="100%" slider-bg="#2D4373" slider-bg-hover="#5f79b7" slider-bg-fill="#000" pointer-bg="#fff" pointer-bg-hover="#dcdcdc" pointer-bg-focus="#dcdcdc" pointer-shadow="0 0 2px rgba(0, 0, 0, 0.6)" pointer-shadow-hover="0 0 2px rgb(0, 0, 0)" pointer-shadow-focus="0 0 2px rgb(0, 0, 0)" pointer-border="1px solid hsla(0, 0%, 88%, 0.5)" pointer-border-hover="1px solid hsla(0, 0%, 88%, 0.5)" pointer-border-focus="1px solid hsl(201, 72%, 59%)" > </toolcool-range-slider>
17. Available custom drag handler.
- triangle
- star
- rhombus
- trapezoid
- parallelogram
- right-arrow
<toolcool-range-slider min="0" max="100" value="10" pointer-shape="triangle" pointer-width="2rem" pointer-height="2rem" pointer-bg="#d7067d" pointer-bg-hover="#0b94c7" pointer-bg-focus="#0b94c7" slider-width="400px" slider-bg="#6787cd"></toolcool-range-slider>
18. Make the origin of the pointer always in the center.
<script src="tcrs-generated-labels.min.js"></script> <script src="tcrs-origin-center.min.js"></script> <script src="toolcool-range-slider.min.js"></script>
<tc-range-slider value="60" origin-at-center="true" generate-labels="true"> </tc-range-slider>
19. Add a tooltip to each pointer.
<script src="tcrs-moving-tooltip.min.js"></script> <script src="toolcool-range-slider.min.js"></script>
<tc-range-slider value1="20" value2="50" value3="80" round="0" moving-tooltip="true" moving-tooltip-distance-to-pointer="40" moving-tooltip-width="35" moving-tooltip-height="30" moving-tooltip-bg="#721d82" moving-tooltip-text-color="#efefef" moving-tooltip-units="%" moving-tooltip-units-type="prefix"> </tc-range-slider>
20. Add marks to the slider.
<script src="tcrs-marks.min.js"></script> <script src="toolcool-range-slider.min.js"></script>
<tc-range-slider value1="20" value2="50" value3="80" marks="true" marks-step="5" </tc-range-slider>
21. Get & set the value.
<toolcool-range-slider id="example"></toolcool-range-slider>
const $slider = document.getElementById('example');
// set value $slider.value = 100; // get value $slider.value
// OR <toolcool-range-slider value-label=".value-1"></toolcool-range-slider> <div class="value-1"></div>
22. Add inline CSS classes to the slider.
$slider1.addCSS(` /* CSS styles here */ `);
23. Event handlers.
// change event ------------ $slider.addEventListener('change', (evt) => { const value = Math.round(evt.detail.value); $value1.textContent = value.toString(); console.log(`Change event: ${ value }`) }); // onMouseDown event ------------ $slider.addEventListener('onMouseDown', (evt) => { const nativeEvent = evt.detail.nativeEvent; console.log('Native mousedown event:', nativeEvent) }); // onMouseUp event ------------ $slider.addEventListener('onMouseUp', (evt) => { const nativeEvent = evt.detail.nativeEvent; console.log('Native mouseup event:', nativeEvent); }); // onPointerClicked event ------------ $slider.addEventListener('onPointerClicked', (evt) => { const $pointer = evt.detail.$pointer; console.log('Pointer clicked event:', $pointer); }); // onKeyDownEvent event ------------ $slider.addEventListener('onKeyDown', (evt) => { const nativeEvent = evt.detail.nativeEvent; console.log('Native onKeyDown event:', nativeEvent); });
Changelog:
05/15/2023
- v4.0.27: Bugfix
04/25/2023
- v4.0.26: Bugfix
04/13/2023
- v4.0.25: Bugfix
04/02/2023
- v4.0.24: Bugfix
03/30/2023
- v4.0.23: Bugfix
03/15/2023
- v4.0.22: Bugfix
02/11/2023
- v4.0.21: Update
02/04/2023
- v4.0.20: Added mousewheel-disabled attribute
11/18/2022
- v4.0.19: Added generated labels plugin API
11/14/2022
- v4.0.18: bugfix
10/11/2022
- tooltip plugin: added unit type
10/05/2022
- v4.0.17
10/04/2022
- Added marks plugin.
10/02/2022
- v4.0.15: added more features
09/27/2022
- v4.0.12: added addCSS API
09/27/2022
- v4.0.7: update pointer shapes – make it work for any number of pointers
09/27/2022
- v4.0.6: Bugfix
09/25/2022
- v4.0.3: Bugfix
09/22/2022
- v4.0.0: binding labels plugin
09/11/2022
- v3.0.11: fix vertical slider label styles
09/09/2022
- v3.0.3: fix horizontal movement on arrow left / right
09/08/2022
- v3.0.1
09/01/2022
- v2.0.12
08/31/2022
- v2.0.2: 2 pointers – accessibility
08/28/2022
- v1.0.19
08/27/2022
- animation on panel click
08/21/2022
- added right to left and bottom to top
08/20/2022
- fixed an issue with decimal places
08/20/2022
- Added disabled/enabled states.
- Added more events.