Slider

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

Import


import {{'{'}}Slider{{'}'}} from 'fuel-ui/fuel-ui';

Getting Started

Slider is a custom element to programmatically create range sliders

Usage


<!--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;
{{'}'}}

Attributes

Loading table...