makinacorpus/angularjs-slider

Name: angularjs-slider

Owner: Makina Corpus

Description: Slider directive for AngularJS. No dependencies and mobile friendly.

Forked from: angular-slider/angularjs-slider

Created: 2015-06-17 09:39:55.0

Updated: 2015-12-20 09:51:56.0

Pushed: 2015-07-03 15:44:26.0

Homepage:

Size: 373

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

AngularJS slider directive with no external dependencies

Slider directive implementation for AngularJS, without any dependencies.

• Mobile friendly
• Fast
• Well documented
• Customizable
• Simple to use
• Compatibility with jQuery Lite, ie. with full jQuery ( Thanks Jusas! https://github.com/Jusas)

Examples

http://rzajac.github.io/angularjs-slider/

Single slider

n your controller
pe.priceSlider = 150;

tml
>
<rzslider rz-slider-model="priceSlider"></rzslider>
v>

Above example would render a slider from 0 to 150. If you need floor and ceiling values use rz-slider-floor and rz-slider-ceil attributes.

>
<rzslider
     rz-slider-model="priceSlider"
     rz-slider-ceil="450"></rzslider>

<!-- OR -->

<rzslider
     rz-slider-model="priceSlider"
     rz-slider-floor="0"
     rz-slider-ceil="450"></rzslider>

v>

Range slider

n your controller
pe.priceSlider = {
min: 100,
max: 180,
ceil: 500,
floor: 0

tml
lider
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max"></rzslider>

Directive attributes

rz-slider-model

Model for low value slider. If only rz-slider-model is provided single slider will be rendered.

rz-slider-high

Model for high value slider. Providing both rz-slider-high and rz-slider-model will render range slider.

rz-slider-floor

Minimum value for a slider.

rz-slider-ceil

Maximum value for a slider.

rz-slider-step

slider step.

rz-slider-precision

The precision to display values with. The toFixed() is used internally for this.

rz-slider-hide-limit-labels

Set to true to hide min / max labels

rz-slider-always-show-bar

Set to true to always show selection bar

rz-slider-present-only

When set to true slider is used in presentation mode. No handle dragging.

rz-slider-translate

Custom translate function. Use this if you want to translate values displayed on the slider. For example if you want to display dollar amounts instead of just numbers do this:

rz-slider-show-ticks

Display a tick for each value.

n your controller

pe.priceSlider = {
min: 100,
max: 180,
ceil: 500,
floor: 0


pe.translate = function(value)

return '$' + value;

tml
lider
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max"
rz-slider-translate="translate"
rz-slider-show-ticks="true"></rzslider>

Slider events

To force slider to recalculate dimensions broadcast reCalcViewDimensions event from parent scope. This is useful for example when you use slider with tabs - see demo/tabs.html example.

You can also force redraw with rzSliderForceRender event.

At the end of each “slide” slider emits slideEnded event.

pe.$on("slideEnded", function() {
 // user finished sliding a handle 

Project integration

<script src="/path/to/angularjs/angular.min.js"></script>
<script src="/path/to/slider/rzslider.min.js"></script>

<script>
    var YourApp = angular.module('myapp', ['rzModule']);
</script>

Browser support

I use Slider on couple of my projects and it's being tested on desktop versions of Chrome, Firefox, Safari, IE 9/10. Slider is also tested on Android and iPhone using all browsers available on those platforms.

Disclaimer

This project is based on https://github.com/prajwalkman/angular-slider. It has been rewritten from scratch in JavaScript (the original source was written in CoffeeScript).

License

Licensed under the MIT license