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

classDescription
rangeThe default range class
range-primaryWill apply the primary color to the range
range-secondaryWill apply the secondary color to the range
range-successWill apply the success color to the range
range-warningWill apply the warning color to the range
range-errorWill apply the error color to the range
range-flat-primaryWill apply the primary color to the range and the track right will have a blue color
range-flat-secondaryWill apply the secondary color to the range and the track right will have a blue color
range-flat-successWill apply the success color to the range and the track right will have a blue color
range-flat-warningWill apply the warning color to the range and the track right will have a blue color
range-flat-errorWill apply the error color to the range and the track right will have a blue color