jQuery UI Helpers / Slider

The Slider is an Input

All of the SliderFor and most of the Slider methods create hidden elements along with the slider where they store the selected values. This means that sliders can be put on a form and their values will be sent to the server when the form is submitted - without extra coding. The only exception is the overload which takes an int array parameter.

@Html.JQueryUI().Slider(new int[] {25}, null)

This creates a fully-functional slider, but you will have to write JavaScript event handlers to do anything with it. See the Events page for more details.

The other sliders display their current value. The text before the value is the name of the field or property, or can be spceified with the Label method.

@Html.JQueryUI().Slider("Value1", 75)

This generates the following HTML.

<div><span>Value1&nbsp;</span><span>75</span><div data-jqui-slider-names="Value1" data-jqui-slider-value="75" data-jqui-type="slider"></div><input id="Value1" name="Value1" type="hidden" value="75" /></div>

And here is the slider.

Value1 75

A slider can handle more than one value. The values can be set independently from each other, but if you set exatly two values then you can define a range between them. To do this set the range to the value SliderRange.Between.

@model SliderModel
@Html.JQueryUI().SliderFor(m => m.MinPrice, m => m.MaxPrice).Range(SliderRange.Between).Label("Price range:")

When using more values on a single slider it is also a good idea to explicitly set the label, otherwise the slider displays the name of the first property or field.

Price range: 20-50

Container

The sliders are surrounded by a div element. You can use the ContainerCssClass method to set the CSS class of this container element, and set the width of the slider for example.

@Html.JQueryUI().Slider("Value2", 42).ContainerCssClass("slider")

The generated HTML.

<div class="slider"><span>Value2&nbsp;</span><span>42</span><div data-jqui-slider-names="Value2" data-jqui-slider-value="42" data-jqui-type="slider"></div><input id="Value2" name="Value2" type="hidden" value="42" /></div>

A small piece of CSS.

.slider { width: 200px;}

And the slider:

Value2 42

This might also be useful when you want to create a set of vertical sliders. The following example demonstrates this.

@Html.JQueryUI().Slider("Value10", 75).Orientation(Orientation.Vertical).ContainerCssClass("vertical-slider").Label("V10: ")
@Html.JQueryUI().Slider("Value11", 25).Orientation(Orientation.Vertical).ContainerCssClass("vertical-slider").Label("V11: ")
@Html.JQueryUI().Slider("Value12", 55).Orientation(Orientation.Vertical).ContainerCssClass("vertical-slider").Label("V12: ")
@Html.JQueryUI().Slider("Value13", 15).Orientation(Orientation.Vertical).ContainerCssClass("vertical-slider").Label("V13: ")

The CSS.

.vertical-slider { display: inline-block; margin-right: 50px;}

Here are the sliders.

V10:  75
V11:  25
V12:  55
V13:  15

Labels

By default sliders display the name of the property or field and the current value before the slider control. The name can also be specified with the Label method.

This behaviour can be changed with the LabelStyle method which can be used to configure the following label modes:

  • None: Only the slider control is visible without any additional labels. The values are still tracked in hidden input elements.
  • ValueOnly: Slider value is displayed but name is not.
  • LabelAndValue: Both name and value are visible. This is the default behaviour.
@Html.JQueryUI().Slider("Value31", 42).ContainerCssClass("slider").Label("Demo Label:")
<br/>
@Html.JQueryUI().Slider("Value32", 25).ContainerCssClass("slider").LabelStyle(SliderLabelStyle.ValueOnly)
<br />
@Html.JQueryUI().Slider("Value33", 80).ContainerCssClass("slider").LabelStyle(SliderLabelStyle.None)
Demo Label: 42

25

HTML Helpers

Fluent Configuration API