## Slider

This is the NoUiSlider (from Refreshless.com), wrapped in an Angular2 component

Slider Value
Slider Value
Second Slider Value

### Import

    import {{'{'}}FuiSliderModule{{'}'}} from 'fuel-ui'; //module
    import {{'{'}}Slider{{'}'}} from 'fuel-ui'; //class

### Getting Started

Slider is a custom element to programmatically create range sliders

### Usage

<tabset>

    <!--horizontal-->
    <slider background="#E24932" step="10" pips="6" pipDensity="5"
        [minValue]="minValue" [maxValue]="maxValue" [(value)]="sliderValue">
    </slider>

    <!--vertical-->
    <slider background="#E24932" step="10" pips="6" pipDensity="5"
        [minValue]="minValue" [maxValue]="maxValue" [(value)]="sliderValue"
        orientation="vertical" height="200px">
    </slider>

    <!--horizontal with 2 values-->
    <slider background="#E24932" step="10" pips="6" pipDensity="5"
        [minValue]="minValue" [maxValue]="maxValue" [(value)]="sliderValue" [(secondValue)]="secondSliderValue">
    </slider>

    <!--vertical with 2 values-->
    <slider background="#E24932" step="10" pips="6" pipDensity="5"
        [minValue]="minValue" [maxValue]="maxValue" [(value)]="sliderValue" [(secondValue)]="secondSliderValue"
        orientation="vertical" height="200px">
    </slider>

    export class SliderExample{{'{'}}
        sliderValue: number = 20;
        secondSliderValue: number = 80;
        minValue: number = 0;
        maxValue: number = 100;
    {{'}'}}

</tabset>

### Attributes

Loading table...