# Slider

![Slider](https://camo.githubusercontent.com/d4635dbfc74c802b7b6dac1edb65d68c1490850b/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706f7077612f62696c6473636869726d666f746f323031362d31312d3036756d32312e312e706e67)

## Layout

### Default

![Default Slider](https://camo.githubusercontent.com/b7c13556f123878ae99fa0811ef24e712f7e4474/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706c72646f2f62696c6473636869726d666f746f323031362d31312d3036756d32312e322e706e67)

```html
<input type="range" class="slider slider-round" />
```

### Slider-Round with colors

```html
<!--Blue (Default)-->
<input type="range" class="slider slider-round blue" />
<!--Gray-->
<input type="range" class="slider slider-round gray" />
```

![Sliders](https://camo.githubusercontent.com/c0c6be5a5b312310018a0f6a7c4eeea3863300d8/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706c7264772f62696c6473636869726d666f746f323031362d31312d3036756d32312e322e706e67)

### Slider Squared

![Slider Squared](https://camo.githubusercontent.com/283941ab56b00325f13072b63386bef85a89d61f/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706c7261702f62696c6473636869726d666f746f323031362d31312d3036756d32312e322e706e67)

```html
<!--Normal Square-->
<input type="range" class="slider slider-square" />
<!--Square Inverted-->
<input type="range" class="slider slider-square-inverted" />
```

### Slider Vertical

![Slider Vertical](https://camo.githubusercontent.com/b49a437150b150f408cb1f2af028f47c7f3b76c9/68747470733a2f2f7069636c6f61642e6f72672f696d6167652f726469706c726c772f62696c6473636869726d666f746f323031362d31312d3036756d32312e322e706e67)

```html
<input type="range" class="slider slider-round slider-vertical" />
```