Slider

Adjust values within a specified range using a handle

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.

---
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>

<script>
    import { Slider } from 'webcoreui/svelte'
</script>

<Slider
    min={0}
    max={100}
    value={50}
    onChange={e => console.log(e.target.value)}
/>

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

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.

---
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.

<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:

<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