HTML Dual Range Slider Examples using wRunner Plugin

HTML Dual Range Slider JavaScript Example

The following is the example of HTML range slider with 2 handles using Vanilla JavaScript.

var setting = {
    roots: document.querySelector('.my-js-slider'),
    type: 'range',
    step: 1,
    }

var slider = wRunner(setting);
     

Vertical Slider Example

The following is vertical example of HTML two handles slider.

     direction: 'vertical',
     

Dual Range Slider jQuery Example

The following example used jQuery to create two handles range slider.

$(document).ready(function(){
  //wRunner plugin initialization in jQuery
  $('.my-jquery-slider').wRunner({
       type: 'range',
       rangeValue: {
            minValue: 30,
            maxValue: 100,
                 },
       step: 1,
    })
})

Single Range Slider Example

The following is the wRunner single range slider example.