Range Slider

Specify a range for a numeric value

Use the RangeSlider component to allow users to select a range for a numeric value by dragging two points of a slider along a track.

---
import { RangeSlider } from 'webcoreui/astro'
---

<RangeSlider />

<script>
    import { listen } from 'webcoreui'

    listen('rangeSliderOnChange', event => console.log(event))
</script>

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

<RangeSlider
    onChange={event => console.log(`${event.min}-${event.max}`)}
/>

import React from 'react'
import { RangeSlider } from 'webcoreui/react'

const Component = () => (
    <RangeSlider
        onChange={event => console.log(`${event.min}-${event.max}`)}
    />
)

export default Component

The RangeSlider component can be used without any props. If no props are specified, the slider will be rendered with a range from 0 to 100 with a step of 1 and a minimum gap of 5 between the min and max values.

Steps and Gaps

To change the step or the gap between the min and max values, you can use the step and minGap props:

<RangeSlider step={10} />

<RangeSlider minGap={20} />

States

Min and maximum values can be specified using the min and max props, and you can also preselect values using the selectedMin and selectedMax props:

<RangeSlider
    min={100}
    max={500}
/>

<RangeSlider
    selectedMin={20}
    selectedMax={80}
/>

To disable the component, set the disabled prop to true:

<RangeSlider
    disabled={true}
    selectedMin={20}
    selectedMax={80}
/>

Labels

You can specify up to 4 different labels on your RangeSlider component:

• label: Specifies a label above the input.
• subText: Specifies a label below the input.
• minLabel: Specifies a label next to the min slider (left-side).
• maxLabel: Specifies a label next to the max slider (right-side).

<RangeSlider label="Filter for price" />

<RangeSlider
    label="Filter for price"
    subText="Updated filter is saved to preferences"
/>

<RangeSlider
    label="Filter for price"
    subText="Updated filter is saved to preferences"
    minLabel="$0"
    maxLabel="$100"
/>

<RangeSlider
    label="Filter for price"
    subText="Updated filter is saved to preferences"
    minLabel="$0"
    maxLabel="$100"
    minIcon="chevron-left"
    maxIcon="chevron-right"
/>

For minIcon and maxIcon, you can pass an icon type as the value (only applicable for Astro), or pass an SVG string.

Interactive Labels

Labels can also be made dynamic and interactive by setting the interactiveLabels and updateLabels props to true.

• interactiveLabels: Wraps the labels with buttons, making them interactive on click.
• updateLabels: Updates labels to reflect current values. The numbers from labels are automatically extracted.

Click on the labels to move the range around.

<RangeSlider
    selectedMin={20}
    selectedMax={80}
    minLabel="$20"
    maxLabel="$80"
    minIcon="chevron-left"
    maxIcon="chevron-right"
    interactiveLabels={true}
    updateLabels={true}
/>

Colors

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

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

If you need to style your RangeSlider components individually, you can also use the color, background, and thumb props to achieve the same effect:

<RangeSlider
    color="var(--w-color-success)"
    background="var(--w-color-primary-60)"
    thumb="var(--w-color-primary)"
/>

API

type RangeSliderEventType = {
    min: number
    max: number
}

type RangeSliderProps = {
    min?: number
    max?: number
    selectedMin?: number
    selectedMax?: number
    step?: number
    minGap?: number
    disabled?: boolean
    color?: string
    background?: string
    thumb?: string
    label?: string
    subText?: string
    minLabel?: string
    maxLabel?: string
    minIcon?: string
    maxIcon?: string
    interactiveLabels?: boolean
    updateLabels?: boolean
    className?: string
}

type SvelteRangeSliderProps = {
    onChange?: (event: RangeSliderEventType) => void
} & RangeSliderProps

type ReactRangeSliderProps = {
    onChange?: (event: RangeSliderEventType) => void
} & RangeSliderProps