Touch-enabled Custom Range Slider Web Component – ToolCool Range Slider

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:

07/20/2023

• v4.0.28: Bugfix

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.