A slider for displaying a range of values

// Can be created dynamically
var slider = new OreeshSlider();


<!-- Or via HTML -->
<!-- Basic example -->
<oreesh-slider></oreesh-slider>
 
<!-- Slide from both sides -->
<oreesh-slider multi></oreesh-slider>

<!-- Min and max values -->
<oreesh-slider min="10" max="100" multi></oreesh-slider>

<!-- Snap to nearest whole number -->
<oreesh-slider snap></oreesh-slider>

<!-- Snap and multi -->
<oreesh-slider snap multi></oreesh-slider>

<!-- Snap to nearest multiple of 2 -->
<oreesh-slider snap snapunit="2"></oreesh-slider>

<!-- Basic example -->
<oreesh-slider></oreesh-slider>

<!-- Two slider buttons -->
<oreesh-slider multi></oreesh-slider>

<!-- Custom width -->
<oreesh-slider multi style="width: 700px;"></oreesh-slider>

<!-- min and max values -->
<oreesh-slider min="10" max="100" multi></oreesh-slider>

<!-- Values will snap to nearest mulitple of 1 -->
<oreesh-slider snap></oreesh-slider>

<!-- Snap with two buttons -->
<oreesh-slider snap multi></oreesh-slider>

<!-- Values will snap to nearest multiple of 2 -->
<oreesh-slider snap multi snap-unit="2"></oreesh-slider>

<!-- Values will snap to either 0, 1, 2, or 10 -->
<oreesh-slider snap multi snap-values="[0,1,2,10]"></oreesh-slider>

<!-- Inital values of 2 and 5 -->
<oreesh-slider multi left-value="2" right-value="5"></oreesh-slider>

The slider also emits events when the sliders are moved $slider.on('left-value-change', function(e) {
// originalEvent.detail for jQuery, or just e.detail for vanilla javascript var val = e.originalEvent.detail; }); $slider.on('right-value-change', function(e) {
var val = e.originalEvent.detail; });