View Source Slider

<Slider>

A form element for selecting a value within a range.

Overview

By default, sliders choose values in the range 0-1.

<Slider value="progress" />

Use lowerBound and upperBound to specify the range of possible values.

<Slider
    value="progress"
    lowerBound={-1}
    upperBound={2}
/>

Use the step attribute to set the distance between valid values.

<Slider
    value="progress"
    lowerBound={0}
    upperBound={10}
    step={1}
/>

Customize the appearance of the slider with the children label, minimum-value-label and maximum-value-label.

<Slider value="value">
    <Text template="label">Percent Completed</Text>
    <Text template="minimumValueLabel">0%</Text>
    <Text template="maximumValueLabel">100%</Text>
</Slider>

Attributes

Children

  • label
  • minimumValueLabel
  • maximumValueLabel

References

Link to this reference

lowerBound

The lowest allowed value.

Link to this reference

step

The distance between allowed values.

Link to this reference

upperBound

The highest allowed value.