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" filter-options="GBP £" 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>