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.
You can play around with a Ui.Slider below using the controls.
Ui.Slider
<Ui.Slider size={Ui.Size.Px(16)} disabled={false} value={50} max={100} min={0} step={1}/>
The value of the component can be set with the value property.
value
<> <Ui.Slider value={25}/> <Ui.Slider value={50}/> <Ui.Slider value={76}/></>
The size of the component can be set with the size property.
size
<> <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}/></>
The minimum value can be set with the min property.
min
<> <Ui.Slider value={80} min={25}/> <Ui.Slider value={80} min={50}/> <Ui.Slider value={80} min={75}/></>
The maximum value can be set with the max property.
max
<> <Ui.Slider value={10} max={20}/> <Ui.Slider value={10} max={40}/> <Ui.Slider value={10} max={60}/></>
The component can be disabled using the disabled property.
disabled
<> <Ui.Slider disabled={true} value={50}/> <Ui.Slider disabled={false} value={50}/></>
Mint UI is a design system and component library for building websites, web and desktop applications.