Range
Classes Information
| ClassName | Description |
|---|---|
| range | The default range class |
| range-primary | primary color to the range |
| range-secondary | secondary color to the range |
| range-success | success color to the range |
| range-warning | warning color to the range |
| range-error | error color to the range |
| range-flat-primary | primary color to the range and the track right will have a blue color |
| range-flat-secondary | secondary color to the range and the track right will have a blue color |
| range-flat-success | success color to the range and the track right will have a blue color |
| range-flat-warning | warning color to the range and the track right will have a blue color |
| range-flat-error | error color to the range and the track right will have a blue color |
Basic Usage
Example Code
html
<input type="range" class="range" />Colors
Example Code
html
<input type="range" class="range range-primary" />
<input type="range" class="range range-secondary" />
<input type="range" class="range range-success" />
<input type="range" class="range range-warning" />
<input type="range" class="range range-error" />Flated
Example Code
html
<input type="range" class="range range-flat-primary" />
<input type="range" class="range range-flat-secondary" />
<input type="range" class="range range-flat-success" />
<input type="range" class="range range-flat-warning" />
<input type="range" class="range range-flat-error" />Vertical
Make sure to set height or margin to the range.
Example Code
html
<input type="range" class="range range-vertical my-12" />