UI Atoms
Slider
Slider shape
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 amui-h-mb-sm">
<div class="amui-a-slider">
<input type="range" min="1" max="100" value="50" class="amui-a-slider__range is--primary" id="myRange">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 amui-h-mb-sm">
<div class="amui-a-slider is--rounded">
<input type="range" min="1" max="100" value="50" class="amui-a-slider__range is--primary" id="myRange">
</div>
</div>
</div>
Slider states
<div class="amui-g-grid row">
<div class="amui-g-grid__item col-xs-12 amui-h-mb-sm">
<div class="amui-a-slider">
<input type="range" min="1" max="100" value="50" class="amui-a-slider__range is--primary" id="myRange">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 amui-h-mb-sm">
<div class="amui-a-slider">
<input type="range" min="1" max="100" value="50" class="amui-a-slider__range is--primary" id="myRange">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 amui-h-mb-sm">
<div class="amui-a-slider">
<input type="range" min="1" max="100" value="50" class="amui-a-slider__range is--secondary" id="myRange">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 amui-h-mb-sm">
<div class="amui-a-slider">
<input type="range" min="1" max="100" value="50" class="amui-a-slider__range is--tertiary" id="myRange">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 amui-h-mb-sm">
<div class="amui-a-slider">
<input type="range" min="1" max="100" value="50" class="amui-a-slider__range is--success" id="myRange">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 amui-h-mb-sm">
<div class="amui-a-slider">
<input type="range" min="1" max="100" value="50" class="amui-a-slider__range is--warning" id="myRange">
</div>
</div>
<div class="amui-g-grid__item col-xs-12 amui-h-mb-sm">
<div class="amui-a-slider">
<input type="range" min="1" max="100" value="50" class="amui-a-slider__range is--danger" id="myRange">
</div>
</div>
</div>