jQuery Plugin That Creates Fast, Styleable Snappable Range Input In CSS

Rangestepper.js jQuery plugin that creates highly capturable range inputs in a CSS style. Download and insert .js and .css files into your project and you are ready to go. jQuery is required.

custom simple range slider css, range slider with min and max values, range slider with custom steps, jquery range slider with labels, css range slider, range slider jquery

A Simple Bootstrap 4 Steps Plugin | Bootstrap Steps

How to make use of it:

1. Load the jQuery library and jQuery range stepper plugin JS and CSS into the document.

<link href="css/rangestepper.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/rangestepper.js"></script>

2. Call the plugin on the DIV element and set the parameters of the scope slider.


// input name
inputName: 'rangestepper',

// set to 0 to place the thumb at the beginning of the range input slider
// if a negative value is set to minVal,
// the thumb will be set at the center/origin where the value reaches 0.
minVal: -10,
maxVal: 10

// display labels for each step
subscript: false


3. The plugin automatically converts a DIV element into an input like this:

<input type="hidden" name="rangestepper">
$('#container input').val();

Customizable & Snappable Range Slider Plugin, Rangestepper.js Github

See Demo And Download

Official Website(eek): Click Here

This superior jQuery/javascript plugin is developed by eek. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…


How to Create a Skeleton Screen Loading In Pure CSS

Skeleton Screen CSS is a complete set of elements for a hierarchical screen consisting of pure CSS. The source includes scss and compiled thumbnail and non-thumbnail CSS…