Value Selection

• Feb 15, 2021
• 2 minutes to read

ASPxTrackBar is a slider control that allows users to select a numeric value. Users can select an ASPxTrackBar value by positioning the handle within a range of values that you limit with the MinValue* and MaxValue properties. You can change the drag handle position in the following ways:

• Click on the track or scale

  Users can click a specific position on the track or scale to change the track bar value. Use the ASPxTrackBar.ScalePosition property to specify the scale position: top, bottom, both top and bottom, or hidden.

  See animation

• Click increment and decrement buttons

  A user can click increment and decrement buttons to change the drag handle position’s value, defined by the ASPxTrackBar.Step property. Use the ASPxTrackBar.ShowChangeButtons property to control increment and decrement button availability.

  See animation

• Use the mouse wheel

  Users can scroll the mouse wheel to change the drag handle position. If the ASPxTrackBar.AllowMouseWheel property is set to false, users cannot use the mouse wheel to change a track bar value. Note that if the track bar is focused, a user can scroll the mouse wheel to change the value, even if the mouse pointer is not above the editor. To scroll a page, users should remove focus from the track bar.

• Drag the handles

  Users can drag a handle and drop it at the required position. Use the ASPxTrackBar.ShowDragHandles property to control drag handle availability.

  See animation

• Press arrow keys

  If the track bar is in horizontal orientation mode, users can press the Left or Right arrow keys to change the track bar value. In vertical orientation mode, they can use the Up or Down arrow keys.

• Move Bar Highlight

  If the ASPxTrackBar.AllowRangeSelection property is set to true, users can select a range of values instead of a single value. The ASPxTrackBar control allows users to move the selected range along the track by dragging the track’s highlighted portion called the bar highlight.

  See animation

Note that the ASPxTrackBar control automatically marks the last clicked handle as focused and highlights it. To change the handle position, users can press arrow keys, click increment/decrement buttons, or use the scroll wheel. Note that a click on the track or scale changes the position of the nearest drag handle.