Dapper UI
Download more icon variants from https://tabler-icons.io/i/brand-github View on GitHub
Download more icon variants from https://tabler-icons.io/i/notebook Getting Started
Quick Start (tl;dr)
Installation
Usage
Download more icon variants from https://tabler-icons.io/i/components Components
Button
TextField
Slider
Select
Checkbox
Text
Dialog
Modal
ProgressBar
Meter
Download more icon variants from https://tabler-icons.io/i/bulb Concepts
Theming
Colors
Icons
Styling
Dark Mode
Download more icon variants from https://tabler-icons.io/i/notebook Getting Started
Quick Start (tl;dr)
Installation
Usage
Download more icon variants from https://tabler-icons.io/i/components Components
Button
TextField
Slider
Select
Checkbox
Text
Dialog
Modal
ProgressBar
Meter
Download more icon variants from https://tabler-icons.io/i/bulb Concepts
Theming
Colors
Icons
Styling
Dark Mode

Slider

import { Slider } from "@dapper-ui/core";
The Slider component allows users to set a number value by sliding a handle (thumb) along a horizontal or vertical track.

Demo

Color
1
<Slider label="Example"/>

Props

Slider

id

Type
string
Default Value
Autogenerated random ID

disabled

Type
boolean
Default Value
false

helpText

Type
string | undefined
Default Value
undefined

error

Type
string | undefined
Default Value
undefined

required

Type
boolean
Default Value
false

value

Type
number
Default Value
0

label

Type
string
Default Value
None

hideLabel

Type
boolean
Default Value
false

autoFocus

Type
boolean
Default Value
false

When set to true, automatically focuses the element when the component is mounted.

This is useful for usability and accessibility reasons, for example to focus an element when a modal is opened.

color

Type
string | undefined
Default Value
undefined

When set to true, automatically focuses the element when the component is mounted.

This is useful for usability and accessibility reasons, for example to focus an element when a modal is opened.

radius

Type
Radius | undefined
Default Value
undefined

When set to true, automatically focuses the element when the component is mounted.

This is useful for usability and accessibility reasons, for example to focus an element when a modal is opened.

radiusThumb

Type
Radius | undefined
Default Value
undefined

Overwrites the more general radius prop

radiusTrack

Type
Radius | undefined
Default Value
undefined

Overwrites the more general radius prop

fullWidth

Type
boolean
Default Value
false

Overwrites the more general radius prop

min

Type
number
Default Value
0

Overwrites the more general radius prop

max

Type
number
Default Value
100

Overwrites the more general radius prop

step

Type
number
Default Value
1

Overwrites the more general radius prop

classLabel

Type
string
Default Value
Empty string

Additional CSS classes to add to the label.

style

Type
string | undefined
Default Value
undefined

Custom CSS styles to apply.

Especially useful for positioning styles like margings.