Ui.Slider

This component lets the user specify a numeric value which must be no less than a given value, and no more than another given value.

Interactive Demo

You can play around with a Ui.Slider below using the controls.

Size (16px)
Value (50)
Min (0)
Max (100)
Step (1)
Disabled
<Ui.Slider
size={Ui.Size.Px(16)}
disabled={false}
value={50}
max={100}
min={0}
step={1}/>
Value

The value of the component can be set with the value property.

<>
<Ui.Slider value={25}/>
<Ui.Slider value={50}/>
<Ui.Slider value={76}/>
</>
Size

The size of the component can be set with the size property.

<>
<Ui.Slider size={Ui.Size.Px(12)} value={50}/>
<Ui.Slider size={Ui.Size.Px(16)} value={50}/>
<Ui.Slider size={Ui.Size.Px(20)} value={50}/>
</>
Min

The minimum value can be set with the min property.

<>
<Ui.Slider value={80} min={25}/>
<Ui.Slider value={80} min={50}/>
<Ui.Slider value={80} min={75}/>
</>
Max

The maximum value can be set with the max property.

<>
<Ui.Slider value={10} max={20}/>
<Ui.Slider value={10} max={40}/>
<Ui.Slider value={10} max={60}/>
</>
Disabled

The component can be disabled using the disabled property.

<>
<Ui.Slider disabled={true} value={50}/>
<Ui.Slider disabled={false} value={50}/>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.