Sliders

Sliders allow users to make selections from a range of values.

Page Summary

Specifications references

Sliders support setting content descriptors for use with screen readers.

Continuous sliders allow users to make meaningful selections that don’t require a specific value.

Continuous slider Continuous slider dark

With icons:

Continuous slider with icons Continuous slider with icons dark

In your screen you can use:

return OdsSlider(
  value: 20.0,
);

You can add icons to the continuous slider like this:

return OdsSlider(
  value: 20.0,
  startIcon: Icon(Icons.volume_mute),
  endIcon: Icon(Icons.volume_up),
);

Continuous lockups slider Continuous lockups slider dark

With icons:

Continuous lockups slider with icons

In your screen you can use:

return OdsSlider(
  value: 20.0,
  displayValue: 20.0.round().toString(),
);

You can add icons to the continuous lockups slider like this:

return OdsSlider(
  value: 20.0,
  displayValue: 20.0.round().toString(),
  startIcon: Icon(Icons.volume_mute),
  endIcon: Icon(Icons.volume_up),
);

Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to input an exact value.

Discrete slider Discrete slider dark

With icons:

Discrete slider with icon Discrete slider with icon dark

In your screen you can use:

return OdsSlider(
  value: 20.0,
  steps: 10,
);

You can add icons to the discrete slider like this:

 return OdsSlider(
  value: 20.0,
  steps: 10,
  startIcon: Icon(Icons.volume_mute),
  endIcon: Icon(Icons.volume_up),
);

Soon available