Slider

Sliders allow users to make selections from a range of values. They reflect a range of values along a bar, from which users may select a single value or range of values.

<x-mbc::slider aria-label="Basic slider example" />

Continuous Slider link

Continuous sliders allow users to select a value along a continuous range. Use them when the specific value doesn't matter, such as adjusting volume or brightness.

Default (0-100)

Custom Range (0-50)

Temperature (60-90°F)

<div style="display: flex; flex-direction: column; gap: 2rem; padding: 1rem;">
    <div>
        <x-mbc::typography variant="body2" gutterBottom>Default (0-100)</x-mbc::typography>
        <x-mbc::slider aria-label="Volume control" name="volume" />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Custom Range (0-50)</x-mbc::typography>
        <x-mbc::slider 
            :min="0" 
            :max="50" 
            :value="25" 
            aria-label="Brightness control" 
            name="brightness" 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Temperature (60-90°F)</x-mbc::typography>
        <x-mbc::slider 
            :min="60" 
            :max="90" 
            :value="72" 
            aria-label="Temperature control" 
            name="temperature" 
        />
    </div>
</div>

Best Practice: Always provide an aria-label for accessibility. The name attribute is used when submitting forms.

Discrete Slider link

Discrete sliders show a value indicator when active, making it easier for users to see the exact value they're selecting. Use them when precision matters.

Quantity (0-10)

Rating (0-5)

Percentage (0-100)

<div style="display: flex; flex-direction: column; gap: 2rem; padding: 1rem;">
    <div>
        <x-mbc::typography variant="body2" gutterBottom>Quantity (0-10)</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :min="0" 
            :max="10" 
            :value="5" 
            aria-label="Quantity selector" 
            name="quantity" 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Rating (0-5)</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :min="0" 
            :max="5" 
            :value="3" 
            aria-label="Rating selector" 
            name="rating" 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Percentage (0-100)</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :min="0" 
            :max="100" 
            :value="75" 
            aria-label="Percentage selector" 
            name="percentage" 
        />
    </div>
</div>

Use Case: Use discrete sliders when users need to see the exact value, such as setting quantities, ratings, or percentages.

Discrete with Tick Marks link

Add visible tick marks to discrete sliders to show all available values. Tick marks require both :discrete="true" and :tickMarks="true", plus a step value.

Priority Level (1-5)

Every 10 (0-100)

Every 25 (0-100)

<div style="display: flex; flex-direction: column; gap: 2rem; padding: 1rem;">
    <div>
        <x-mbc::typography variant="body2" gutterBottom>Priority Level (1-5)</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :tickMarks="true"
            :min="1" 
            :max="5" 
            :value="3"
            :step="1"
            aria-label="Priority level" 
            name="priority" 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Every 10 (0-100)</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :tickMarks="true"
            :min="0" 
            :max="100" 
            :value="50"
            :step="10"
            aria-label="Value by tens" 
            name="tens" 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Every 25 (0-100)</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :tickMarks="true"
            :min="0" 
            :max="100" 
            :value="50"
            :step="25"
            aria-label="Quarters" 
            name="quarters" 
        />
    </div>
</div>

Note: Tick marks provide visual feedback for all available values, making it clear what options are available to the user.

Range Slider link

Range sliders have two thumbs, allowing users to select a range of values. Use :range="true" and provide valueStart and valueEnd for initial values.

Price Range ($0-$100)

Discrete Range (0-10)

With Minimum Distance (minRange=10)

<div style="display: flex; flex-direction: column; gap: 2rem; padding: 1rem;">
    <div>
        <x-mbc::typography variant="body2" gutterBottom>Price Range ($0-$100)</x-mbc::typography>
        <x-mbc::slider 
            :range="true"
            :min="0" 
            :max="100" 
            :valueStart="20"
            :valueEnd="80"
            aria-label="Price range" 
            nameStart="priceMin"
            nameEnd="priceMax"
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Discrete Range (0-10)</x-mbc::typography>
        <x-mbc::slider 
            :range="true"
            :discrete="true"
            :min="0" 
            :max="10" 
            :valueStart="3"
            :valueEnd="7"
            aria-label="Value range" 
            nameStart="valueMin"
            nameEnd="valueMax"
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>With Minimum Distance (minRange=10)</x-mbc::typography>
        <x-mbc::slider 
            :range="true"
            :discrete="true"
            :min="0" 
            :max="100" 
            :valueStart="30"
            :valueEnd="70"
            :minRange="10"
            aria-label="Range with minimum distance" 
            nameStart="rangeMin"
            nameEnd="rangeMax"
        />
    </div>
</div>

Use Case: Use range sliders for price filters, time ranges, or any scenario where users need to select a minimum and maximum value. The minRange prop prevents thumbs from overlapping.

Custom Steps link

Control the granularity of value selection using the step prop. The slider will snap to multiples of the step value.

Step by 1 (Default)

Step by 5

Step by 20

Step by 0.5 (Decimal)

<div style="display: flex; flex-direction: column; gap: 2rem; padding: 1rem;">
    <div>
        <x-mbc::typography variant="body2" gutterBottom>Step by 1 (Default)</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :min="0" 
            :max="10" 
            :value="5"
            :step="1"
            aria-label="Step by 1" 
            name="step1" 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Step by 5</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :min="0" 
            :max="100" 
            :value="50"
            :step="5"
            aria-label="Step by 5" 
            name="step5" 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Step by 20</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :tickMarks="true"
            :min="0" 
            :max="100" 
            :value="60"
            :step="20"
            aria-label="Step by 20" 
            name="step20" 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Step by 0.5 (Decimal)</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :min="0" 
            :max="5" 
            :value="2.5"
            step="0.5"
            aria-label="Step by 0.5" 
            name="stepDecimal" 
        />
    </div>
</div>

Note: Steps work with both continuous and discrete sliders. For discrete sliders with tick marks, the tick marks will be placed at each step interval.

Disabled State link

Disable sliders using the disabled attribute. Disabled sliders cannot be interacted with and have reduced opacity.

Disabled Continuous Slider

Disabled Discrete Slider

Disabled with Tick Marks

Disabled Range Slider

<div style="display: flex; flex-direction: column; gap: 2rem; padding: 1rem;">
    <div>
        <x-mbc::typography variant="body2" gutterBottom>Disabled Continuous Slider</x-mbc::typography>
        <x-mbc::slider 
            :value="50"
            aria-label="Disabled continuous slider" 
            disabled 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Disabled Discrete Slider</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :min="0" 
            :max="10" 
            :value="7"
            aria-label="Disabled discrete slider" 
            disabled 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Disabled with Tick Marks</x-mbc::typography>
        <x-mbc::slider 
            :discrete="true"
            :tickMarks="true"
            :min="0" 
            :max="100" 
            :value="75"
            :step="25"
            aria-label="Disabled with tick marks" 
            disabled 
        />
    </div>

    <div>
        <x-mbc::typography variant="body2" gutterBottom>Disabled Range Slider</x-mbc::typography>
        <x-mbc::slider 
            :range="true"
            :discrete="true"
            :min="0" 
            :max="100" 
            :valueStart="25"
            :valueEnd="75"
            aria-label="Disabled range slider" 
            disabled 
        />
    </div>
</div>

Use Case: Use disabled sliders to show values that cannot currently be changed, such as settings that require permissions or locked features.

Properties link

mbc::slider link

Name	Type	Default	Description
`aria-label`	`string`	`required`	Accessibility label for the slider
`disabled`	`boolean`	`false`	Whether the slider is disabled
`discrete`	`boolean`	`false`	Whether to show value indicator (discrete slider)
`max`	`int`	`100`	Maximum value of the slider
`min`	`int`	`0`	Minimum value of the slider
`minRange`	`int`	`null`	Minimum distance between thumbs (for range slider)
`name`	`string`	`null`	Input name attribute (for single slider)
`nameEnd`	`string`	`rangeEnd`	Input name for end thumb (range slider)
`nameStart`	`string`	`rangeStart`	Input name for start thumb (range slider)
`range`	`boolean`	`false`	Whether this is a range slider (two thumbs)
`step`	`int`	`null`	Step size for value quantization
`tickMarks`	`boolean`	`false`	Whether to show tick marks (requires discrete=true)
`value`	`int`	`50`	Current value (for single slider)
`valueEnd`	`int`	`70`	End value (for range slider)
`valueStart`	`int`	`30`	Start value (for range slider)

References link

Edit this page