Search documentation v0.6.1

Slider

Adjust values within a specified range using a handle

Source ↗️ Report Issue ↗️

Use the Slider component for settings that require a range of values, rather than a fixed input. Common use cases include volume control, brigtness adjustment, price range filter, date range selection, or size and quantity control.

Preview
How to use Sliders in Astro
---
import { Slider } from 'webcoreui/astro'
---
<Slider
min={0}
max={100}
value={50}
className="slider"
/>
<script>
document.querySelector('.slider').addEventListener('change', e => {
console.log(e.target.value)
})
</script>
How to use Sliders in Svelte
<script>
import { Slider } from 'webcoreui/svelte'
</script>
<Slider
min={0}
max={100}
value={50}
onChange={e => console.log(e.target.value)}
/>
How to use Sliders in React
import React from 'react'
import { Slider } from 'webcoreui/react'
const Component = () => (
<Slider
min={0}
max={100}
value={50}
onChange={e => console.log(e.target.value)}
/>
)
export default Component
If you don’t set an initial value for the component using the value prop, it’ll use the value from the min prop.

Labels

To add a dynamic label to the component, introduce a new element that shares the same value as the value prop, and update it when the value of the slider changes. Using CSS, you can align the label in any way you like.

40
---
import { Slider } from 'webcoreui/astro'
---
<span>40</span>
<Slider
min={0}
max={100}
value={40}
className="slider"
/>
<script>
document.querySelector('.slider').addEventListener('change', e => {
e.target.previousElementSibling.innerText = e.target.value
})
</script>
<script>
import { Slider } from 'webcoreui/svelte'
let value = 40
</script>
<span>{value}</span>
<Slider
min={0}
max={100}
value={value}
onChange={e => value = e.target.value}
/>
import React, { useState } from 'react'
import { Slider } from 'webcoreui/react'
const Component = () => {
const [value, setValue] = useState(40)
return (
<React.Fragment>
<span>{value}</span>
<Slider
min={0}
max={100}
value={value}
onChange={e => setValue(e.target.value)}
/>
</React.Fragment>
)
}
export default Component

Step

Using the step prop, you can change the amount of increment between values. By default, the step is set to 1. You can see how changing the step from 1 to 10 and 20 changes the behavior of the Slider component below.

Default
20
Step set to 10
20
Step set to 20
20
<Slider min={0} max={100} value={20} />
<Slider min={0} max={100} value={20} step={10} />
<Slider min={0} max={100} value={20} step={20} />

States

If you need to disable the component, you can use the disabled prop:

<Slider
min={0}
max={100}
value={20}
disabled={true}
/>

Colors

You can style Slider components by overriding the following CSS variables:

html body {
--w-slider-background: #252525;
--w-slider-color: #FFF;
--w-slider-thumb: #252525;
}

If you need to style your Slider components on an individual levels, you can also use the color, background, and thumb props to achieve the same effect:

Default
<Slider
min={0}
max={100}
value={50}
color="var(--w-color-success)"
background="var(--w-color-primary-60)"
thumb="var(--w-color-primary)"
/>

API

type SliderProps = {
min: number
max: number
value?: number
step?: number
disabled?: boolean
color?: string
background?: string
thumb?: string
id?: string
className?: string
}
type SvelteSliderProps = {
onChange?: (e: any) => any
} & SliderProps
type ReactSliderProps = {
onChange?: (e: any) => any
} & SliderProps
PropPurpose
min Sets the lowest permitted value for the slider.
max Sets the highest permitted value for the slider.
value Sets the current value for the slider. If the value is not set, it'll take the value of the min prop.
step Sets the increment between values.
disabled Disables the slider.
color Sets the color of the slider.
background Sets the background color of the slider.
thumb Sets the color of the thumb.
id Pass an ID for the slider.
className Pass additional CSS classes for the slider.
Svelte & React PropPurpose
onChange Attach on-change event listeners to the slider.

Request improvement for this page