Highly Customizable Range Slider In JavaScript – Slider89.js

Preview:

Description:

Slider89.js is a small JavaScript library to create a minimal-looking, highly customizable range slider from plain HTML markup.

How to use it:

1. Load the Slider89.js and Slider89.css files in the HTML document.

<link rel="stylesheet" href="slider89.css" />
<script src="slider89.js"></script>

2. Create a container element in which the custom range slider should be placed.

<div id="demo"></div>

3. Initialize the library to generate a basic range slider.

const demo = document.querySelector('#demo');
const mySlider = new Slider89(demo, {
      // options here
});

4. Override the default min/max/current values.

const mySlider = new Slider89(demo, {
      min: 0,
      max: 100,
      value: 0
});

5. Add a caption to the range slider.

const mySlider = new Slider89(demo, {
      caption: 'cssscript.com'
});

6. Determine the width of the range slider.

const mySlider = new Slider89(demo, {
       
      // absolute width
      absWidth: false, 
      // or '300px', etc
      width: 'auto'
});

7. Determine the number of digits after the decimal place.

const mySlider = new Slider89(demo, {
       
      // default 0
      comma: 3,
      // 3,000 => 3
      trimComma: true
});

8. Hide the current value tip after a specific timeout.

const mySlider = new Slider89(demo, {
      tipDuration: 250
});

9. Add CSS classes to the range slider’s wrapper element.

const mySlider = new Slider89(demo, {
      classList: ['class-1', 'class-2', ...]
});

10. Determine whether to replace the praent container element.

const mySlider = new Slider89(demo, {
      replaceNode: false
});

11. Update the settings.

const mySlider = new Slider89(demo, {
      mySlider.newValues(configProperties)
});

12. Override the default styles of the range slider.

.slider89 {
  display: inline-block;
}
.slider89 .slider {
  position: relative;
  font-family: monospace;
  font-size: 18px;
  font-weight: bold;
  padding: 0;
}
.slider89_wrapper {
  background-color: hsl(0, 0%, 19%);
  height: 25px;
}
.slider89 .slider_knob {
  position: absolute;
  cursor: pointer;
  left: 0;
  z-index: 1;
}
.slider89_knob {
  height: 25px;
  width: 14px;
  background-color: hsl(0, 0%, 27%);
}
.slider89 .slider_tooltip {
  position: absolute;
  display: flex;
  align-items: center;
  height: 100%;
  cursor: default;
  opacity: 1;
  transition: .2s ease-out;
}
.slider89_tooltip {
  color: hsl(0, 0%, 45%);
  padding: 1px 3px 0;
}
.slider89 .slider_tooltip.left {
  left: 0;
}
.slider89 .slider_tooltip.right {
  right: 0;
}
.slider89 .slider_tooltip.hidden {
  opacity: 0;
}
.slider89_header {
  color: hsl(0, 0%, 70%);
  font-family: 'Calibri', serif;
  font-size: 20px;
}
.noselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Changelog:

05/21/2023

• Mark revelant touch events as non-passive

01/29/2023

• Fix the default style sheet getting inserted multiple times

01/29/2023

• Implement property postSetters, called after a value hast been set

12/18/2021

• Fix slider properties not being enumerable

12/02/2021

• Structure: Change attribute syntax to attribute=[value]

03/26/2021

• Improve touch support massively

03/26/2021

• Fix a custom setter not being able to modify the handled property

07/13/2020

• Fix “missing beginning character” error not matching `:`