Sneak peek: ASP.NET track bar control (aka slider control)–coming in v2011 vol 2

ctodx
26 September 2011

From the nifty and much-requested department, I am pleased to present the new ASP.NET (and MVC!) track bar control, ASPxTrackBar. (You also might possibly have caught a reference to it in passing during our BUILD recap and What’s New webinar last week.)

A track bar (or slider) control essentially comprises three parts: a thumb, a scale, and some UI that helps to increase or decrease the value represented by the thumb on the scale. You can also grab the thumb with the mouse and move it to represent a larger or smaller value. The track bar has the following notable features:

1. The bar can be shown horizontally or vertically. Note that the value on the scale is rendered differently.

Track Bar: Horizontal and Vertical Display

2. The user can use the bar either in a normal (or forward) direction or a reversed direction.

Track Bar: Normal or Reverse Display

3. Not only is the value on the scale rendered differently, but you can specify that the scale labels be highlighted too.

Track Bar: Scale labels highlight

4. The bar comes with a value tooltip. This is shown when the user changes the value of the control, and is animated to show the changes as they occur.

Track Bar: Tooltips

5. Normally we think of track bar as a control for visualizing and changing numeric values. Ours has a special display mode linked to an items collection. The items in the collection define the steps on the scale, and you can specify the label and the tooltip associated with each item. This mode also allows for the items to be loaded from the database.

Track Bar: Item Display Mode

6. The bar supports ranges. In this mode, the bar has two thumbs, one for the “smaller” value, and one for the “larger” value. The tooltip is changed to show the range selected.

Track Bar: setting ranges

7. The bar has a very flexible method to set the scale. The developer can create a completely different scale, even one that is not symmetrical.

Track Bar: setting the scale

8. The bar is rendered in a two step process. The server renders part of the bar, which is completed on the client side. This has the advantage of a slightly smaller download, with a richer user experience on the client.

To repeat, in case you missed it above: this new track bar control will be available in both ASP.NET and ASP.NET MVC for v2011 vol2.

5 comment(s)
Sigurd Decroos
Sigurd Decroos

Looks really nice!

26 September, 2011
Marc Greiner (DevExpress MVP)
Marc Greiner (DevExpress MVP)

This looks more like as WPF or Winforms track bar control to me.

(it is meant to be a compliment)

26 September, 2011
James Zhong
James Zhong

Good! :)

27 September, 2011
Yug Media Resource
Yug Media Resource

Guys for the support of MVC, HUGE thank you!

27 September, 2011
Mike (DevExpress Support)
Mike (DevExpress Support)

Thank you for your interest in ASP.NET MVC Extensions.

29 September, 2011

Please login or register to post comments.