Highly Customizable Range Slider In JavaScript

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;
}

Download Details:

Author: Hallo89

Live Demo: https://hallo89.net/slider89

GitHub: https://github.com/Hallo89/Slider89

#javascript #html #css