HTML Range Slider with 2 Handles Control in JavaScript

The wRunner is a powerful and highly configurable range slider plugin for both Vanilla JavaScript and jQuery. It helps you to create HTML range slider with 2 handles that can be control in JavaScript. You can set minimum, maximum, layout (vertical or horizontal) and range limit in configuration options. Beside dual handles, it also support single handle.

Moreover, this slider is adjustable and can be fully customized with additional CSS according to your needs.

[intro_ad]

Plugin Overview and Preview

Plugin:	wRunner
Author:	whiteGloom
Category:	Text & Input
Published:	January 19, 2024
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	20 KB
Dependencies:	jQuery 2.1 or Latest (Optional)

HTML Range Slider with 2 Handles Control in JavaScript

Last Modified: [last-modified]

MIT

Fork on GitHub

15,665

Demo Download Download Master Repository

[ad_after_overview]

Documentation
Configuration Options
Changelog

How to Create Html Range Slider With 2 Handles

1. To create “HTML range slider with 2 handles”, we need to getting started with wRunner. So, load the plugin assets into your HTML document.

<!-- wRunner CSS -->
<link rel="stylesheet" href="css/wrunner-default-theme.css">
<!-- wRunner JS -->
<script src="js/wrunner-native.js"></script>

2. After that, create HTML div element with unique id (or class name) in which your range slider will be created dynamically. For example, we create the following element.

<div class="my-js-slider"></div>

3. Now, call the wRunner plugin in plain JavaScript with the following basic configuration options and done.

<script>
var setting = {
    roots: document.querySelector('.my-js-slider'),
    type: 'range',
    step: 1,
    }
var slider = wRunner(setting);
<\script>

4. You can also initialize the plugin in jQuery.

$(document).ready(function(){
  $('.my-js-slider').wRunner({
       type: 'range',
       rangeValue: {
            minValue: 30,
            maxValue: 100,
                 },
       step: 1,
    })
})

For more advance usage, please check the Configuration Options tab. If you like this plugin, don’t forget to submit a review. Enjoy coding, best of luck!

Advance Configuration Options for HTML two Handles Range Slider

The following are some advanced configuration options to create / customize HTML range slider with 2 handles.

Option	Default	Type	Description
`roots`	document.body	`String`	It define the parent element where slider will be created dynamically. Example: wRunner({ roots : document.body, });
`direction`	‘horizontal’	`String`	Set the layout for range slider. Possible options are: ‘horizontal’ and ‘vertical’. Example: wRunner({ direction : 'horizontal', });
`limits`	{ minLimit: 0, maxLimit: 100 }	`String`	This object option set the minimum and maximum range for limit. Example: wRunner({ limits : { minLimit: 0, maxLimit: 100 }, });
`singleValue`	50	`Number`	Set the single value. Example: wRunner({ singleValue : 50, });
`step`	1	`Number`	Step size for ranging. Example: wRunner({ step : 1, });
`valueNoteDisplay`	true	`Boolean`	Decide weather to show labels or not. Example: wRunner({ valueNoteDisplay : true, });
`theme`	‘default’	`String`	The name of theme. It is useful to set custom theme for slider. Just create set of CSS styles and pass the custom theme name in this option value. Example: wRunner({ theme : 'default', });

Callback Functions for HTML Dual Range Slider

The following are callback functions to execute on various wRunner events.

$(el).wRunner({
 onRootsUpdate(function(roots){
     console.log("Roots: "+ roots)
  })
  onStepUpdate: function(step){
    console.log("step: "+ step)
  }
 onDirectionUpdate(function(styles){
    // do something
  })
   onDivisionsCountUpdate(function(count){
     console.log("Count: "+ count)
  })
  onTypeUpdate(function(type){
     console.log("Type: "+ type)
  })
  onLimitsUpdate(function(limits){
     console.log("Limits: "+ limits)
  })
  onValueUpdate(function(values){
     console.log("Values: "+ values)
  })
  onValueNoteDisplayUpdate(function(value){
     console.log("Label: "+ value)
  })
  onThemeUpdate(function(styles){
     //code to run
  })
})

API Methods to get / set Slider values

var rangeSlider = wRunner();

// set/get parent element
rangeSlider.setRoots(roots);
rangeSlider.getRoots();

// true or false
rangeSlider.setValueNoteDisplay(value);
rangeSlider.getValueNoteDisplay();

// set/get type: 'single' or 'range'
rangeSlider.setType(type);
rangeSlider.getType();

// set/get limits
rangeSlider.setLimits(limits);
rangeSlider.getLimits();

// set/get value(s)
rangeSlider.setSingleValue(value);
rangeSlider.setRangeValue([values]);
rangeSlider.getValue();

// set nearest value
rangeSlider.setNearestValue(value, viaPercents);

// set/get the number of divisions
rangeSlider.setDivisionsCount(count);
rangeSlider.getDivisionCount(count);

// set/get theme
rangeSlider.setTheme(theme);
rangeSlider.hetTheme();

// set/get direciton
// 'horizontal' or 'vertical'
rangeSlider.setDirection(direction);
rangeSlider.getDirection();

// set/get step size
rangeSlider.setStep(stepSize);
rangeSlider.getStep();

Changelog

14/12/2019

Track events update

29/11/2019

v1.5.1 Updated

8/11/2019

Released 1.2.38 version.

16/10/2019

Initial release.

[ad_after_artical]

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.