Skip to content

Latest commit

 

History

History
86 lines (52 loc) · 4.17 KB

design-patterns-controls-RangeSlider.md

File metadata and controls

86 lines (52 loc) · 4.17 KB

RangeSlider

Basics

A RangeSlider is an element used to set a range of values. It provides a visual indication of the current selected rnage amidst the total range of content.

When to use

Selectors let the user choose options from a set of existing values. Choose the control best suited to your needs

  • CheckBox - a choice to switch between 2 mutually exclusive options (on/off, enable/disable) or to indicate a subordinate setting (I agree to terms) when paired with another control opt in to a single choice. For example, use a single CheckBox for "I agree" instead of a different control where the user chooses between "I agree" and "I don't agree".
  • TriStateCheckBox - can be checked, not checked or partially checked to indicate the checked state of children items in a hierarchy.
  • DropDown - a single choice between a large number of options. The DropDown control is also used on a smaller set of options where the default option is recommended for most users. The DropDown control can also be used to make multiple selections from a set of options.
  • OptionsGroup - No longer recommended
  • RadioButtons - a single choice between 2-7 equally weighted options
  • LocationDropDown - a single choice between Azure regions
  • SubscriptionDropDown - a single choice between subscriptions for the current user
  • ResourceGroupDropDown - a single choice between resource groups for the current user. Also enables creating a new resource group.

Best practices

A RangeSlider is a good choice when you know that users think of the selected range as a relative quantity, not numeric values in fields. For example, users may want to set the low and high acceptable scale settings within an overall minimum and maximum allowable values.

Do

  • Use a RangeSlider when you want your users to be able to set defined values (such as volume or brightness).
  • Use step points (or tick marks) if you don’t want the Slider to allow arbitrary values between min and max.
  • Use a Slider when the user would benefit from instant feedback on the effect of setting changes.
  • Set the infoBalloonContent to concise, helpful text with a link to learn
  • Use the label option to provide a helpful name for the control.

Don't

  • Don't use a RangeSlider when the options are not values.
  • Don’t use a RangeSlider for binary settings.
  • Don’t create a continuous RangeSlider if the range of values is large.
  • Don’t use for a range of three values or less.

Developer tips and tricks

  • To display HTML in the infoBalloonContent use this code

infoBalloonContent: { htmlTemplate:"Sample label
infoBalloonContent should explain concepts and
can include a link to learn more.Learn more about infoBalloon", viewModel: {}, }

Interactive control and sample source code

Go to the playground site to use the latest control and get source code for your project. Learn more about playground.

The RangeSlider control offers different create methods and has the following entries in the interactive controls playground

Related info