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)
Last Modified:
MIT
14,946
[ad_after_overview]

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]
About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...