# angularjs-slider: a dependency-free range slider for AngularJS 1.X

> rzslider is a slider directive for AngularJS 1.X that ships without external dependencies and supports single values, ranges, right to left layouts, and keyboard input. The project is in support-only mode, with its author looking for a maintainer.

**angular-slider/angularjs-slider** — Slider directive for AngularJS 1.X. No dependencies and mobile friendly. 

- Repository: https://github.com/angular-slider/angularjs-slider
- Website: http://angular-slider.github.io/angularjs-slider
- Stars: 1,216 · Forks: 479
- Language: JavaScript
- License: MIT
- Published: 2026-10-19 · Updated: 2026-10-19 · Language: en
- Canonical page: https://hysenlabs.com/projects/angular-slider-angularjs-slider

## A slider directive that adds nothing to the bundle

rzslider exists to solve one narrow problem: putting a slider on an AngularJS 1.X page without pulling in a UI framework to do it. The project description calls it a slider directive for AngularJS 1.X with no dependencies, and the package manifest backs that up, listing no runtime dependencies at all and a single peer dependency on `angular: ^1.2.x`. The entry point in package.json is `dist/rzslider.js`, with types shipped separately as `dist/rzslider.d.ts`.

What that buys you is small. The directive handles a single value or a range, works in a horizontal or vertical orientation, and is documented as mobile friendly, keyboard accessible, customizable, and compatible with jQuery Lite, meaning it does not require full jQuery to be present. Right to left layouts are supported, which matters for any application that ships a translated interface.

The range of what it does not do is equally clear. There is no theming system beyond CSS you write yourself, no animation layer, no validation, and no touch gesture handling described beyond the general claim of being mobile friendly. The demo folder in the repository holds demo.html, demo.js, demo.css, a debug page, a slider modal, and a directive-in-custom-template example, which is a fair picture of the scope: a control, plus the wiring to drive it.

The project is the older half of a two package family. The README points anyone who wants an Angular version above 1.X to the separate ngx-slider repository, so the two are maintained as distinct lines rather than as one package with two entry points.

## Two attributes carry the whole interface

The directive communicates with your controller through two attributes. `rz-slider-model` holds the value, and `rz-slider-options` holds an options object. Everything else, the floor, the ceiling, the step, the orientation, is expressed inside that options object, and the options object can be a scope property or an inline literal.

A single slider with a bound value looks like this in the template and this in the controller:

```html
<div>
    <rzslider rz-slider-model="priceSlider"></rzslider>
</div>
```

```javascript
// In your controller
$scope.priceSlider = 150
```

With that alone the slider renders a range from 0 to 150, because the value itself sets the ceiling. When you need a floor and a ceiling that differ from the value, you pass an options object, and you can either build it in the controller:

```javascript
$scope.slider = {
  value: 150,
  options: {
    floor: 0,
    ceil: 450,
  },
}
```

or write the options inline in the template and keep only the value in the controller:

```html
<div>
    <rzslider
         rz-slider-model="value"
         rz-slider-options="{floor: 0, ceil: 450}"></rzslider>
</div>
```

```js
$scope.value = 150
```

The range case works the same way, with the min and max of the range held alongside the shared options. Because the model attribute is a plain scope expression, the slider works in a normal two way binding, which is what makes it usable inside a form without extra glue code.

## Installing from npm, Bower, or a CDN

The package is published on npm, and installation is a single command:

```bash
npm i angularjs-slider
```

or with Yarn:

```bash
yarn add angularjs-slider
```

TypeScript users get definition files with the package, and the documentation asks you to make sure the Angular type definition peer dependency is installed as well:

```bash
npm i @types/angular
```

There is also a Bower route for older projects:

```bash
$ bower install --save angularjs-slider
```

And for a project that does not want a package manager at all, two files are served from cdnjs, with the version placeholder replaced by the release you want:

```
https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/X.X.X/rzslider.min.js
https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/X.X.X/rzslider.min.css
```

Whichever route you take, the page needs the stylesheet, Angular itself, and the directive script, and the module has to be declared as a dependency of your own module:

```html
<link rel="stylesheet" type="text/css" href="/path/to/angularjs-slider/dist/rzslider.css"/>
<script src="/path/to/angularjs/angular.min.js"></script>
<script src="/path/to/angularjs-slider/dist/rzslider.min.js"></script>
```

```javascript
angular.module('yourApp', ['rzSlider'])
```

That is the whole integration. The directive registers itself under the `rzSlider` module name, and your application module lists it in its dependency array.

## The slider cannot see a parent that is still hidden

The most documented failure mode is a slider that renders wrong, or does not render, when its parent element is not visible at initialization time. The cause is structural: if the parent is hidden, the slider has no way to know when it becomes visible, so it cannot compute the geometry it needs.

The typical trigger is an element toggled with `ng-show`. The fix is an event that tells the directive to redraw, and the documentation gives a helper that broadcasts it after a digest cycle:

```js
vm.refreshSlider = function() {
  $timeout(function() {
    $scope.$broadcast('rzSliderForceRender')
  })
}
```

You call that whenever the containing element becomes visible. If you see flickering with the timeout based version, the documentation suggests replacing the `$timeout` call with `$scope.$$postDigest` instead, a change proposed in the project issue tracker.

This is the price of a directive that measures its own position rather than relying on a layout engine that keeps the size correct. It is a real cost for anyone using the slider inside tabs, accordions, or modals, and the project handles it with an event rather than with a resize observer, so each hidden to visible transition needs a deliberate call from the application.

## Step rounding truncates what a user types

The second documented problem is subtler and hits forms directly. By default the slider value is always rounded to the nearest step. When an input field is bound to the slider so a user can type a value, that typed value is rounded when it does not match the step, and with decimal values the problem becomes visible character by character: a user typing `0.` loses the dot, because the partial value is rounded before the decimal point is complete.

The fix is an option. Setting `enforceStep: false` in the options object stops the value from being rounded, which allows the value to be modified externally without regard to the step.

This is a trade you have to make deliberately rather than by default. The step rounding is what keeps the slider on valid values, so turning it off for a decimal entry field means your own validation has to take over the job of rejecting values that do not belong on the step grid.

The combination of the two problems, a slider inside a hidden container that also accepts typed decimals, is where most of the real integration effort goes.

## Support only, and the author is looking for a maintainer

The maintenance picture is the deciding factor for any new adoption, and the project is candid about it. The README carries a status badge marked support-only for 2017, and the author writes plainly: they are looking for a maintainer, have lost their open source stamina for the project, and will probably not push code again unless they find some motivation later. Pull requests will still be merged if they are submitted, but only if they are clean.

That is a precise statement of what a contributor should expect. The last push to the repository was on 2026-07-17, and the newest tagged release is v7.1.0 from 2022-05-26, with v7.0.1 in 2021 and 7.0.0 in 2019 before that. So the code still receives occasional commits while the released version line is several years old.

The MIT licence removes the usual commercial objection. Redistribution, modification, and use in closed products are all permitted, and the LICENSE file at the repository root is the authoritative text.

For an existing application, that combination is workable. The directive is small, the source is in src/, the built assets are committed under dist/, and the upstream ngx-slider project shows the author's own view of where the modern line of this component lives.

## Where ngx-slider or a plain input type is the better fit

There are two honest alternatives, and they differ in kind rather than in degree.

The first is ngx-slider, the separate repository the README points to for anyone above AngularJS 1.X. Same idea, packaged for a later Angular version. If your application is on Angular 2 or later, choosing the 1.X package and then porting later means porting the directive, the module name, and the template syntax anyway, so the 1.X route only makes sense for an application that is staying on 1.X.

The second is the browser's own range input. A range input with a step attribute, styled, gives you a slider with no dependency, no peer dependency, and no module registration. What you give up is the range mode with a lower and an upper handle, the right to left support, the keyboard behaviour, and the two way binding convenience that a directive provides.

For a single value on a form that already uses plain AngularJS and has no design system, the native input is a smaller decision than adding a directive. For a range filter, a price bracket, or a dual handle control, the directive earns its place, and the trade becomes maintaining a small third party directive that nobody upstream is pushing forward.

## Conclusion

Adopt angularjs-slider if you are already inside an AngularJS 1.X application and want a range slider that adds no runtime dependency to the bundle, and you are prepared to own the directive yourself. Do not pick it for a new project, since a separate Angular 2 and later package exists for that, and do not expect new features. Verify three things first: that your Angular version satisfies the `angular: ^1.2.x` peer dependency, that your build still serves the `dist/rzslider.css` and `dist/rzslider.min.js` assets, and that the `enforceStep: false` option is acceptable wherever you let users type decimal values.

## FAQ

### How do I install angularjs-slider and register it in an AngularJS 1.X app?

Run `npm i angularjs-slider`, then include the `dist/rzslider.css` and `dist/rzslider.min.js` files and add `rzSlider` to your module's dependency array with `angular.module('yourApp', ['rzSlider'])`. The package also installs through Bower or can be loaded from cdnjs, and it has no runtime dependencies beyond an Angular peer dependency of `^1.2.x`.

### Why is my angularjs-slider not rendering when it is inside a hidden element?

If the parent element is not visible during initialization the slider cannot know when it becomes visible, which is the documented cause of the problem, particularly with `ng-show`. The documented fix is to broadcast the `rzSliderForceRender` event after a digest cycle using `$timeout`, and to use `$scope.$$postDigest` instead if you see flickering.

### How do I let a user type a decimal value into an input bound to angularjs-slider?

By default the slider rounds the value to the nearest step, which truncates a partially typed decimal. Setting the `enforceStep: false` option stops the rounding so the value can be modified externally without matching the step.

### Who is looking after angularjs-slider now?

The project is marked support-only and the author states they are looking for a maintainer, will probably not push code again, and will merge clean pull requests. The last push was on 2026-07-17 and the newest tagged release is v7.1.0 from 2022-05-26.

## Sources

- [angular-slider/angularjs-slider on GitHub](https://github.com/angular-slider/angularjs-slider)
- [License: MIT](https://github.com/angular-slider/angularjs-slider/blob/master/LICENSE)
- [Project website](http://angular-slider.github.io/angularjs-slider)
- [README](https://github.com/angular-slider/angularjs-slider/blob/master/README.md)
- [Releases](https://github.com/angular-slider/angularjs-slider/releases)

---

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