This is the NoUiSlider (from Refreshless.com), wrapped in an Angular2 component
import {{'{'}}Slider{{'}'}} from 'fuel-ui/fuel-ui';
Slider is a custom element to programmatically create range sliders
<!--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;
{{'}'}}