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 customize with additional CSS according to your needs.

Plugin Overview and Preview

Plugin: wRunner
Author: whiteGloom
Category: Text & Input
Published: November 8, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 20 KB
Dependencies: jQuery 2.1 or Latest (Optional)
Last Modified:
MIT
89 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

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

8/11/2019

  • Released 1.2.38 version.

16/10/2019

  • Initial release.

There are no reviews yet. Be the first one to write one.

Submit Your Review