# Ion.RangeSlider: jQuery 3.0 and 3.1 read the square handle 23 pixels wide

> Ion.RangeSlider is a jQuery plugin with six skins, one or two handles and a long settings table. The default range starts at 10 rather than 0, two jQuery minor lines mismeasure one skin, and the browser tests are not part of npm test.

**IonDen/ion.rangeSlider** — jQuery range slider plugin. Skinnable, touch-friendly, highly configurable. Works with jQuery 1.8 through 4.x.

- Repository: https://github.com/IonDen/ion.rangeSlider
- Website: http://ionden.com/a/plugins/ion.rangeSlider/en.html
- Stars: 2,547 · Forks: 491
- Language: JavaScript
- License: MIT
- Published: 2026-09-28 · Updated: 2026-09-28 · Language: en
- Canonical page: https://hysenlabs.com/projects/ionden-ion-rangeslider

## The default minimum is 10, so an unconfigured slider does not start at zero

The settings table gives the minimum a default of 10 and the maximum a default of 100, with the from handle defaulting to the minimum and the to handle to the maximum. So a slider initialised with no options at all spans ten to a hundred, and the value a form submits before the user touches anything is inside that range rather than at the bottom of it. The step defaults to 1 and must be greater than zero, though it may be fractional, and a separate boolean decides whether the steps are counted from the minimum as written or forced onto whole steps regardless of how many decimals the minimum has. Both handle defaults are 10 and 100 as well, so a per-handle limit that is never set inherits the overall range rather than opening up more space. The gap between two handles has its own controls in double type: a minimum and a maximum interval, both defaulting to zero, which means no limit at all, plus a switch that lets the user drag the whole selected range by its bar. A fourth switch lets a dragged handle push the other one along instead of stopping dead against it, and that one is limited to mouse and touch dragging while still respecting both interval limits and the two fixed-handle switches.

## Two jQuery minor lines read one handle as seven pixels too wide

The page documents a measurement bug tied to specific builds. Under jQuery 3.0.x and 3.1.x the square skin's handle is measured with its 45 degree rotation included, so it comes out at about 23 pixels wide instead of 16. Every value picked with a mouse or a finger then lands slightly off, and the worked example is a 600 pixel slider from 0 to 100 where dragging the handle to the middle reports 51. The error grows on narrower sliders, since the same pixel mistake is a larger share of the track. jQuery 3.2.1 and newer measure the handle correctly, and the other five skins are unaffected.

## The compatibility claim is blanket, with two minor lines carved out of it

One feature line says the plugin works in Internet Explorer 8 and later and in all modern browsers, and the dependency section repeats that nothing else is required beyond jQuery 1.8 or newer. The measurement problem above is the exception the page then documents, and it is the only one. What makes the pair of statements sit awkwardly together is the shape of the exception: it is not an old browser or an old jQuery, but two minor lines in the middle of the supported range, versions most projects upgraded through without noticing they had moved. A reader who takes the feature line at face value and pins jQuery 3.1 gets a slider that looks fine and returns wrong numbers.

## The plugin and its stylesheet are two separate imports

Installation is a package manager call followed by two import lines:

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

The page is explicit that the stylesheet is separate, so importing the plugin on its own produces an unstyled slider. That is the whole integration, and there is no build step and no JavaScript initialisation in it. Under a bundler the plugin requires jquery by itself when no global jQuery exists yet, which is the other half of the setup people miss. The slider itself is built from an ordinary text input that stays in the form, hidden, and holds the current value, so nothing about submitting the form changes.

## The manifest has a floor for jQuery and no ceiling at all

The compatibility statement on the page is 1.8 or newer, up to and including 4.x. The manifest says only this:

```
"peerDependencies": {
    "jquery": ">=1.8"
}
```

So the lower bound is enforced by the package manager and the upper bound exists only in the prose. A jQuery 5 install satisfies the declared range and produces no warning, even though the tested ceiling is 4.0.0 and the page is careful to say up to and including. The entry point is likewise declared the old way, with main pointing at the script file and no exports map, which leaves the resolution of the import in the snippet above to whatever the bundler does by default. Two options further along change what the user reads rather than what they can pick. A prefix and a postfix wrap the displayed value, which is how a currency symbol or a thousands suffix gets attached, and a formatting option rewrites large numbers into separated groups so that ten million is shown as 10 000 000 rather than as digits without separators. A custom values array changes the underlying model instead: the slider then works on array indexes rather than on numbers, and a companion boolean keeps those entries exactly as written, so a value supplied as 20.0 stays 20.0 instead of being normalised to 20.

## npm test never reaches the browser suite

The test script is a chain of three Node level steps:

```
"test": "npm run test:build && npm run test:vendor && npm run test:unit"
```

A build check, a vendor verification script, and the unit tests. The browser tests are separate entries, one plain Playwright run and one against a matrix project, and the all-in-one script is the Node chain followed by the plain browser run. So the matrix project is not in any default path; it has to be asked for by name. That matters because the weekly nineteen-build sweep described on the page is what that matrix project is for, and the per-change subset is narrower again, so what runs on every commit and what runs on a schedule are two different sets of versions.

## Nineteen builds weekly, three versions plus the minified files per change

The full sweep is nineteen jQuery builds: seventeen versions running from 1.8.3 to 4.0.0, plus slim builds of 3.7.1 and 4.0.0. That is a deliberately wide matrix for a plugin whose entire surface is a jQuery call, and it covers both ends of the range the manifest declines to bound. What runs on every change is much smaller: three versions, 1.8.3, 3.7.1 and the slim 4.0.0, and then one more pass against the plugin's minified files under 3.7.1. So the minified build is tested separately from the source build, which is the arrangement that catches a build step dropping something, and the weekly run is what would catch a regression confined to one intermediate version.

## A scratch directory and the LESS sources both ship in the package

The repository root carries a directory named _tmp, which is a working directory committed rather than ignored. The published file list is broader than a plugin's JavaScript and stylesheet:

```
"files": ["js/", "css/", "less/", "readme.md", "history.md", "License.md"]
```

So the LESS sources travel with the compiled CSS, and three documentation files are packaged: the readme, the change history and the licence, the last of them named with a capital L and an md extension rather than the bare LICENSE filename. The manifest also carries a build counter and a build timestamp under its config key, so the number of builds run is recorded next to the version, which is a build number rather than a release number and does not correspond to any tag.

## Conclusion

Ion.RangeSlider suits a form that needs an interval rather than a single number, and the parts that make it useful are the ones with defaults worth knowing: the range opens at 10 to 100, the custom values array switches the slider to working on indexes, and drag_over_limit is what stops a handle dead against the other one. Two checks before adopting it. Import the stylesheet, because the plugin on its own produces an unstyled control, and the package points at the plain script file with no exports map, so a bundler resolves it as it finds it. And if you are still on jQuery 3.0 or 3.1, stay on the other five skins or upgrade, since the square skin shifts every value the user picks on those two minor lines.

## FAQ

### Which jQuery versions does Ion.RangeSlider support?

jQuery 1.8 or newer up to and including 4.x, with the slim builds working too. The manifest only declares a lower bound of 1.8, so the upper limit is stated on the page rather than enforced by the package.

### Why does my Ion.RangeSlider look unstyled?

The stylesheet is a separate file from the plugin. Installing the package and importing it alone gives an unstyled slider, so the CSS has to be imported as well.

### Which jQuery builds measure the Ion.RangeSlider handle wrongly?

jQuery 3.0.x and 3.1.x, and only for the square skin, whose handle is measured with its rotation included at about 23 pixels instead of 16. jQuery 3.2.1 and newer measure it correctly.

### What does step_from_min change in Ion.RangeSlider?

It keeps every value anchored to the minimum plus whole steps, whatever the number of decimals the minimum itself has. It is off by default, and the ordinary step option defaults to 1 and must be greater than zero.

### What does the npm test script cover in Ion.RangeSlider?

Three Node level steps: a build check, a vendor verification script and the unit tests. The Playwright browser tests and the jQuery matrix project are separate scripts and are not part of it.

## Sources

- [IonDen/ion.rangeSlider on GitHub](https://github.com/IonDen/ion.rangeSlider)
- [License: MIT](https://github.com/IonDen/ion.rangeSlider/blob/master/LICENSE)
- [Project website](http://ionden.com/a/plugins/ion.rangeSlider/en.html)
- [README](https://github.com/IonDen/ion.rangeSlider/blob/master/README.md)
- [Releases](https://github.com/IonDen/ion.rangeSlider/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/ionden-ion-rangeslider