UI Thing

Slider

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

Reka UI
API Reference

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

Value [ 50 ]

Multiple thumbs

Range [ 25, 75, 150 ]

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

50

Slider w/ Labels

Slider w/ Labels & Tooltip

Dual Range

Dual Range w/ Output

25 - 75

Volume

25

Temperature

Input

Rate your experience

Okay
😡😍

Rate your experience (tooltip)

😐

Dual Range w/ Input

Credits per Month

Money Range

Vertical

Vertical Input

Vertical Dual Range w/ Tooltip

Object Position

Object position

Price

$
$

Equalizer

Equalizer

Skeleton

Use to show a placeholder while content is loading.

Sonner

Sonner is an opinionated toast component for Vue. It's customizable, but styled by default. Comes with a swipe to dismiss animation.