Javascript Dual Range Slider without jQuery

Category: Slideshow | November 23, 2019
Javascript Dual Range Slider without jQuery
Author: whiteGloom
Official Page: Go to Website
Last Update:November 23, 2019
License:MIT

The “wRunner” is a Javascript dual-range slider that developed using HTML & without jQuery. It comes with more than one handles that allow the user to select the value range.

It’s a powerful and highly configurable range Vanilla Javascript plugin that easy to implement. It can be used where you want to add the filter so site visitors can easily find the specific products.

The plugin enhances the user experience and gives a user easy to navigate through the site products. It normally uses where you want to allow the user to filter the products within the price range.

Moreover, it helps you to create the HTML range slider with 2 or more handles that easy to control through Javascript. You can easily set the minimum and maximum values.

Furthermore, you can set a different layout that is vertical or horizontal. Besides the dual handles, it also supports the single handle.

In addition, this range slider is adjustable and fully customized with additional CSS according to your design requirements.

How to Create a Javascript Dual Range Slider

To create the dual-range slider let’s load its required files into HTML document. We will add the theme style file and a js file.

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

After that, you will need to create an HTML div element with a unique id (or class name) in which your range slider will be created dynamically. Let’s says we created the following element.

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

The Javascript

Now we need to initialize the plugin by declaring the document ready function. Here you can set the min and max values that you want the user able to select.

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

One last thing you need to 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>

That’s it. For further customization, you can play with the configuration option to make it work according to your development needs.

Dual Range Slider Advanced Configuration Options

The following are some advanced configuration options that allow you to create/customize the HTML range slider.

OptionDefaultTypeDescription
rootsdocument.bodyStringIt defines the parent element where the slider will be created dynamically.

Example:

wRunner({
	roots : document.body,
});
direction‘horizontal’StringYou can set the layout for the range slider. Possible options are ‘horizontal’ and ‘vertical’.

Example:

wRunner({
	direction : 'horizontal',
});
limits{ minLimit: 0, maxLimit: 100 }StringThis object option sets the minimum and maximum range for limit.

Example:

wRunner({
	limits : {     minLimit: 0,      maxLimit: 100   },
});
singleValue50NumberSet the single value.

Example:

wRunner({
	singleValue : 50,
});
step1NumberStep size for ranging.

Example:

wRunner({
	step : 1,
});
valueNoteDisplaytrueBooleanDecide whether to show labels or not.

Example:

wRunner({
	valueNoteDisplay : true,
});
theme‘default’StringThe name of the theme. It is useful to set custom theme for the slider. Just create set of CSS styles and pass the custom theme name in this option value.

Example:

wRunner({
	theme : 'default',
});

Callback Functions

The range plugin comes with callback functions that you can execute on the 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 Set Slider values

The range slider also offers the API methods which you can use for advanced customizations.

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();

Did you like this range slider? How it helps you to build a nice and clean range slideshow.? Let me know in below comment section.

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.