Angular rangeSlider Demo

A simple example

The model

$scope.demo1 = {
    min: 20,
    max: 80
};

Default slider

Vertical slider

<div range-slider min="0" max="100" model-min="demo1.min" model-max="demo1.max"></div>

<div range-slider orientation="vertical" min="0" max="100" model-min="demo1.min" model-max="demo1.max"></div>

And here are the values in our model being updated: Min Max

A less simple example

The model

$scope.demo2 = {
    range: {
        min: 0,
        max: 10050
    },
    minPrice: 1000,
    maxPrice: 4000
};

The slider

The HTML

Here we are using the filter, filter-options and step options.

<div range-slider min="demo2.range.min" max="demo2.range.max" model-min="demo2.minPrice" model-max="demo2.maxPrice" filter="currency:'$'" step="100"></div>

Disabling the slider

The model

$scope.demo3 = {
    rangeMin: 10,
    rangeMax: 1500,
    min: 80,
    max: 1000,
    disabled: false
};

The slider

Vertical alignment

The model

$scope.demo4 = {
    min: 300,
    max: 800
};

Left-aligned

The HTML

<div range-slider orientation="vertical left" min="0" max="1000" model-min="demo4.min" model-max="demo4.max"></div>

Hide the values

The model

$scope.demo5 = {
    min: 80,
    max: 1000
};

The slider

You can hide the slider values if you wish to display the values elsewhere.

Maybe you'd prefer to show the values in sentence form... Your current minimum value is {{demo5.min}} and your current maximum value is {{demo5.max}}.

<div range-slider min="0" max="10000" model-min="demo5.min" model-max="demo5.max" show-values="false"></div>

Handle Pinning

The model

$scope.demo6 = {
    valueA: 5000,
    valueB: 3000
};

The sliders

You many 'pin' (and hide) either the minimum or maximum handle to prevent it from being modified, effectivly converting the slider into a single-value slider.

The value of the first slider is: {{demo6.valueA}}; the second slider is {{demo6.valueB}}.

<div range-slider min="0" max="10000" model-max="demo6.valueA" pin-handle="min"></div>

<div range-slider min="0" max="10000" model-min="demo6.valueB" pin-handle="max"></div>

Prevent the handles from being equal

The model

$scope.demo7 = {
    range: {
        min: 0,
        max: 10050
    },
    minPrice: 1000,
    maxPrice: 4000
};

The slider

You can prevent the two values from being equal by using the prevent-equal-min-max="true" attribute. The step value is used to maintain a gap between the values, so if the step is set to 100 the minimum difference will be 100. If no step value is provided a minimum difference of 1 will be used.

The HTML

Here we are using the step and prevent-equal-min-max options.

<div range-slider min="demo2.range.min" max="demo2.range.max" model-min="demo2.minPrice" model-max="demo2.maxPrice" step="100" prevent-equal-min-max="true"></div>

Move values with handles

The model

$scope.demo8 = {
    max: 5000,
    min: 3000
};

The slider

You can make the values move with the handles as they slide by setting attach-handle-values to true.

The HTML

<div range-slider min="0" max="10000" model-min="demo8.min" model-max="demo8.max" attach-handle-values="true"></div>