angular-slider

WebJar for angular-slider

License

License

MIT
Categories

Categories

IDE Development Tools Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

angular-slider
Last Version

Last Version

0.2.3
Release Date

Release Date

Type

Type

jar
Description

Description

angular-slider
WebJar for angular-slider
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/PopSugar/angular-slider

Download angular-slider

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/angular-slider/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angular-slider</artifactId>
    <version>0.2.3</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/angular-slider/
implementation 'org.webjars.npm:angular-slider:0.2.3'
// https://jarcasting.com/artifacts/org.webjars.npm/angular-slider/
implementation ("org.webjars.npm:angular-slider:0.2.3")
'org.webjars.npm:angular-slider:jar:0.2.3'
<dependency org="org.webjars.npm" name="angular-slider" rev="0.2.3">
  <artifact name="angular-slider" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='angular-slider', version='0.2.3')
)
libraryDependencies += "org.webjars.npm" % "angular-slider" % "0.2.3"
[org.webjars.npm/angular-slider "0.2.3"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

angular-slider

Slider directive implementation for AngularJS, without jQuery dependencies. Requires AngularJS v1.1.4 or higher (optional isolate scope bindings support).

Example:

<ul>
    <li ng-repeat="item in items">
        <p>Name: {{item.name}}</p>
        <p>Cost: {{item.cost}}</p>
        <slider floor="100" ceiling="1000" step="50" precision="2" ng-model="item.cost"></slider>
    </li>
</ul>

Range:

<ul>
    <li ng-repeat="position in positions">
        <p>Name: {{position.name}}</p>
        <p>Minimum Age: {{position.minAge}}</p>
        <p>Maximum Age: {{position.maxAge}}</p>
        <slider floor="10" ceiling="60" ng-model-low="position.minAge" ng-model-high="position.maxAge"></slider>
    </li>
</ul>

Usage:

Make sure to load AngularJS first, and then slider.js. Also include the related slider.css.

The module is named ui.slider. To enable it, you must simply list it as a dependency in your app. Example:

var app = angular.module('app', ['ui.slider', 'ngResource', ...]);

You can then use it in your templates like so:

<html ng-app='app'>
    ...
    <body>
        ...
        <slider ...></slider>
    </body>
</html>

Known issues:

  1. When applying filters or orders within an ng-repeat directive, the element can abruptly change its position when the value attached to the slider causes a filter to activate or the order to change. Example: In the above snippet, it would be a very bad idea to order the list by item.cost.

License: MIT

org.webjars.npm

POPSUGAR Inc.

Versions

Version
0.2.3