Range#
Ripple UI comes with a range component that allows you to select a range of values.
Default#
Simple example of a range.
HTML
JSX
<input type="range" class="range" />
Colors#
You can use different colors for the range.
HTML
JSX
<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#
You can use another variant of the range.
HTML
JSX
<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 orientation#
You can use the range in a vertical orientation.
Make sure to set or height or margin to the range.
HTML
JSX
<input type="range" class="range range-vertical mt-14" />
API#
| class | Description |
|---|---|
| range | The default range class |
| range-primary | Will apply the primary color to the range |
| range-secondary | Will apply the secondary color to the range |
| range-success | Will apply the success color to the range |
| range-warning | Will apply the warning color to the range |
| range-error | Will apply the error color to the range |
| range-flat-primary | Will apply the primary color to the range and the track right will have a blue color |
| range-flat-secondary | Will apply the secondary color to the range and the track right will have a blue color |
| range-flat-success | Will apply the success color to the range and the track right will have a blue color |
| range-flat-warning | Will apply the warning color to the range and the track right will have a blue color |
| range-flat-error | Will apply the error color to the range and the track right will have a blue color |