Slider

An input where the user selects a value from within a given range.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

npx ui-thing@latest add slider

Usage

Basic example

Multiple thumbs

Origin UI Examples

These are some examples that I found today over here Origin UI. I think they are cool.

To use these examples you will have to copy the code and adjust it for your own use.

Square Thumb

Solid Thumb

Tiny Thumb

Reference Labels

Ticks

Slider w/ Output

Slider w/ Labels

Slider w/ Labels & Tooltip

Dual Range

Dual Range w/ Output

Volume

Temperature

Input

Rate your experience

Rate your experience (tooltip)

Dual Range w/ Input

Credits per Month

Money Range

Vertical

Vertical Input

Vertical Dual Range w/ Tooltip

Object Position

Price

Equalizer