ion.rangeSlider: a jQuery range slider that still tracks jQuery 4.x

The form control the browser never gave you

A native range input gives you one handle, no labels under the track, and no way to select an interval. ion.rangeSlider exists to cover the gap between that control and a full date or price picker. The README lists the feature set plainly: one handle or two, six built-in skins, negative and fractional values, a custom step, a custom values array of numbers or strings, a value grid with tick marks and labels, dragging the selected interval as a whole, per-handle minimum and maximum limits, prefix and postfix text, and large number formatting such as 10000000 becoming 10 000 000.

The audience is narrow and specific. This is a jQuery plugin, and the README states the dependency is jQuery 1.8 or newer up to and including 4.x, with the slim builds working too. Nothing else is required. If your project has moved off jQuery, the plugin is not for you, and no amount of configuration changes that. If your project still has jQuery on the page for other reasons, this is one of the few slider widgets that will keep working when you upgrade that jQuery, because the project runs its browser suite weekly against 17 jQuery versions from 1.8.3 to 4.0.0 plus the 3.7.1 and 4.0.0 slim builds.

How the slider is built on a hidden text input

The mechanism is worth understanding before you wire it into a form. You start with a regular text input, which stays in the form, hidden, and always holds the current value. The plugin then builds its own markup around that input and keeps the input in sync.

That single design decision explains most of the plugin's behaviour. Because the value lives in a real input with a name, it submits with the rest of the form and needs no serialization step. Because the plugin owns the surrounding markup, it can render two handles, a grid, and shadow limits that a native input cannot express. Because the input is the source of truth, reading the current value means reading the input, not calling a getter on the widget.

Initialization happens either in JavaScript or through data-* attributes on the input. The README gives both forms of the same configuration, and notes that the public methods are update, reset and destroy, with callbacks onStart, onChange, onFinish, onUpdate and onInit. The callbacks are the intended hook for reacting to a drag, so a price filter typically reads the value in onChange or onFinish rather than polling the input.

Installing ion.rangeSlider from npm and wiring a first slider

The package is published as ion-rangeslider. Install it with npm or Yarn, then import both the stylesheet and the plugin. The README is explicit that the stylesheet is a separate file, so importing the plugin alone gives you an unstyled slider.

npm install ion-rangeslider

With the package in place, import the CSS first and the plugin second. Under a bundler the plugin requires jquery by itself when no global jQuery is present yet, so you do not have to import jQuery manually in that case.

import "ion-rangeslider/css/ion.rangeSlider.min.css";
import "ion-rangeslider";

If you would rather not bundle it, the README points at jsDelivr and cdnjs. Three tags are needed: the plugin stylesheet, jQuery, and the plugin script.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/ion.rangeSlider.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/ion.rangeSlider.min.js"></script>

Now add an input and initialize it. The README's minimal example is a text input with an id and a name, initialized with a single call.

<input type="text" id="example_id" name="example_name" value="" />

$("#example_id").ionRangeSlider();

That gives you a default single-handle slider with min 10, max 100 and step 1. For a real price filter, pass options. The README's full example sets a double slider from 1000 to 9000 on a 0 to 10000 range, with the big skin, a dollar prefix and a ten-line grid.

$("#example").ionRangeSlider({
    skin: "big",
    min: 0,
    max: 10000,
    from: 1000,
    to: 9000,
    type: "double",
    prefix: "$",
    grid: true,
    grid_num: 10
});

The same configuration can live in markup as data-* attributes such as data-min, data-max, data-from, data-to, data-type, data-prefix, data-grid and data-grid-num. Pick one route per slider. Mixing both is possible but leaves you with two places to look when a value is wrong.

The jQuery 3.0.x handle bug and other limits worth knowing

The most concrete limitation in the README concerns the square skin. jQuery 3.0.x and 3.1.x measure that skin's handle with its 45-degree rotation included, so they read it as about 23 px wide instead of 16. On a 600 px wide slider from 0 to 100, dragging the handle to the middle reports 51 rather than 50, and the README states the error grows on narrower sliders. jQuery 3.2.1 or newer measures the handle correctly, and the other five skins are unaffected. This is a real failure mode, not a rounding annoyance: the value submitted to your backend is wrong by a visible margin, and it only appears on one skin under two specific jQuery builds.

A second limitation is structural. The plugin is a jQuery plugin. There is no React, Vue or React Native binding in the README, and the initialization path assumes a jQuery object. If your application renders components, you are adding a DOM-rewriting widget into a tree that expects to own its own nodes, and you will have to manage the plugin's lifecycle yourself through the destroy method.

The values option deserves a warning of its own. When you supply a custom values array, the slider works on array indexes rather than on the values themselves. That is a clean design for non-numeric scales, but it means the number you read back is a position unless you map it, and the values_raw option exists precisely because entries such as "20.0" would otherwise be normalized to 20. If your labels are strings that must round-trip exactly, set values_raw. Finally, drag_over_limit, which lets a dragged handle push the other one, applies to mouse and touch drag only and still respects min_interval, max_interval, from_fixed and to_fixed, so it is not a way to escape those constraints.

ion.rangeSlider against noUiSlider and the native input

The obvious comparison is noUiSlider, the other long-lived JavaScript range slider. The difference in approach is the dependency and the value model. noUiSlider is standalone: it does not require jQuery, and it exposes its own API for reading and setting values. ion.rangeSlider is built on jQuery and hides the value in a native input that submits with the form. If your page already loads jQuery, the ion.rangeSlider integration is shorter, because the input is already part of your form and you have nothing to serialize. If your page does not load jQuery, adding it for one slider is a poor trade, and noUiSlider is the more natural fit.

The second alternative is the native input type="range". It costs nothing, works without JavaScript, and is accessible by default. It also gives you one handle, no labelled grid, no prefix formatting and no interval selection, which is exactly the set of features this plugin was written to provide. Use the native control when a single value and no labels are enough. Reach for ion.rangeSlider when you need two handles, a step grid with labels, or a formatted display such as $100 or 100k.

A third consideration is maintenance. The repository is not archived, and the last push was on 2026-09-28, with releases 2.5.0 on 2026-09-10, 2.4.2 on 2026-09-05 and 2.4.1 on 2026-09-03. The package.json carries a build counter and a build date, and the test scripts separate build, vendor, unit and Playwright browser runs, including a browser matrix. That is a project still being worked on, and the weekly jQuery matrix is the part that matters most for adopters, because it is what keeps the plugin usable as jQuery moves.

Licence, upgrade cost and what the test scripts tell you

The licence is MIT, declared in package.json and in the repository's License.md. MIT is permissive, so the practical implication for a commercial product is that you can ship the minified files and the stylesheet without a copyleft obligation. You still have to keep the copyright and permission notice with the distribution. That is a description of the licence text, not legal advice; if your legal team has questions about attribution in a bundled artifact, they should read License.md themselves.

The upgrade cost is low but not zero. The plugin is distributed as js/, css/ and less/ directories, with main pointing at ./js/ion.rangeSlider.js, so a version bump replaces files rather than changing an API surface. The public methods are limited to update, reset and destroy, and the callbacks are a fixed list, which means most upgrades are a version change plus a re-read of history.md. The one thing to check on every bump is the jQuery build you load, given the 3.0.x and 3.1.x square-skin measurement issue.

The repository's scripts are a useful signal for anyone deciding whether to depend on this. npm test runs test:build, test:vendor and test:unit, and test:all adds the Playwright browser run, with a separate test:browser:matrix project. The README states the browser suite runs once a week against 19 jQuery builds, and that every change runs it against 1.8.3, 3.7.1 and 4.0.0-slim, plus once more against the plugin's minified files under 3.7.1. If you pin an old jQuery, that matrix is the reason the plugin still works there.

Editorial conclusion

Adopt ion.rangeSlider if your page already loads jQuery and you need a double-handle range with labels, prefixes or a fixed step, because the plugin writes its value back into a normal input and needs no other dependency. Do not adopt it for a React, Vue or React Native component tree, where the plugin's DOM rewriting and jQuery dependency fit badly, and do not adopt it if you want the native browser control with no script at all. Before shipping, verify which jQuery build you actually load, since 3.0.x and 3.1.x mis-measure the square skin's handle and report roughly 51 instead of 50 on a 600 px slider dragged to the middle; confirm that css/ion.rangeSlider.min.css is imported, because importing the plugin alone gives an unstyled slider; and confirm your min, max, step and values array produce the exact values you expect, since the slider works on array indexes when values is set.

Frequently asked questions

Official sources

1. IonDen/ion.rangeSlider on GitHub
2. License: MIT
3. Project website
4. README
5. Releases