# Angular rangeSlider LEGACY Demo

Some basic demos to get you going.

Note: As this is demonstrating legacy support all two-way property bindings (i.e. '=') must be defined on the directive, for example `disabled` is no longer an optional attribute.

### 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" disabled="false"></div>

    <div range-slider orientation="vertical" min="0" max="100" model-min="demo1.min" model-max="demo1.max" disabled="false"></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" disabled="false"></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

#### Right-aligned

#### The HTML

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

#### The HTML

    <div range-slider orientation="vertical right" min="0" max="1000" model-min="demo4.min" model-max="demo4.max" disabled="false"></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" disabled="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-min="0" model-max="demo6.valueA" pin-handle="min" disabled="false"></div>

    <div range-slider min="0" max="10000" model-min="demo6.valueB" model-max="10000" pin-handle="max" disabled="false"></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" disabled="false"></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 equal to true.

#### The HTML

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