Ajax Slider Control display non-numeric values - asp.net

Question

I am trying to use the Slider control from AjaxControlTookit and my problem is that I cannot find a way to display non-numeric values inside the label bound to the slider. My code is like below..
Code:
<asp:TextBox ID="txtSlider" runat="server" style="display:none;/>
<ajaxToolkit:SliderExtender ID="slider1" runat="server" TargetControlID="txtSlider" Steps="3" BoundControlID="lblSliderValue" Minimum="1" Maximum="3" Orientation="Vertical"></ajaxToolkit:SliderExtender>
<asp:Label ID="lblSliderValue" runat="server" />
The lblSliderValue only shows me the values of 0,1 and 2, however I would need low, medium and high. So far I haven't found any way to specify these. I tried adding the textbox's OnTextChanged="txtSlider_textChanged" AutoPostBack="true" and set the lblSliderValue in code behind, with no succes. Any ideas on how to achieve this?

Answer 1

Such functionality doesn't implemented in slider. So let's customize it a bit.
At the first, you need to download toolkit sources. We will modify two files (I'll provide a links to codeplex for these files so you'll easy locate them in solution): SliderExtender.cs and SliderBehavior_resource.pre.js
Mark the SliderExtender class with this attribute: [ParseChildren(typeof(ListItem), ChildrenAsProperties = true)]
private List<ListItem> items = new List<ListItem>();
[PersistenceMode(PersistenceMode.InnerProperty)]
[ExtenderControlProperty]
[ClientPropertyName("items")]
public List<ListItem> Items
{
get { return items; }
}
static SliderExtender()
{
if (!ScriptObjectBuilder.CustomConverters.ContainsKey(typeof(ListItem)))
{
ScriptObjectBuilder.CustomConverters.Add(typeof(List<ListItem>), SerializeItemsToJson);
}
}
private static string SerializeItemsToJson(object itemsParam)
{
var items = itemsParam as List<ListItem>;
if (items == null)
return null;
return "{" + string.Join(",", items.Select(item => string.Format("{0}: '{1}'", item.Value, item.Text))) + "}";
}
That's all with server code so let's tweak client side code of extender.
Let's start with JavaScript code. Add to body of Sys.Extended.UI.SliderBehavior function this item: this._items = null;
And add to prototype of Sys.Extended.UI.SliderBehavior function code below:
get_items: function () {
return this._items;
},
set_items: function (value) {
if (Sys.Serialization.JavaScriptSerializer.serialize(this._items) != value) {
this._items = Sys.Serialization.JavaScriptSerializer.deserialize(value);
this.raisePropertyChanged('items');
}
}
Then, modify the _calcValue function as following:
_calcValue: function (value, mouseOffset) {
var val;
if (value != null) {
if (!Number.isInstanceOfType(value)) {
if (this._items) {
for (var prop in this._items) {
if (this._items.hasOwnProperty(prop) && this._items[prop] === value) {
value = prop;
break;
}
}
}
//rest of function's code stays as it is
And the last step - fix the _ensureBinding function:
_ensureBinding: function () {
if (this._boundControl) {
var value = this._value;
var displayItem = this._items && this._items.hasOwnProperty(value) ? this._items[value] : null;
if (value >= this._minimum || value <= this._maximum) {
var isInputElement = this._boundControl.nodeName == 'INPUT';
if (isInputElement) {
this._boundControl.value = displayItem || value;
}
else if (this._boundControl) {
this._boundControl.innerHTML = displayItem || value;
}
}
}
}
After all changes above, rebuild solution and add reference on toolkit dll to your project. Sample of usage of modified slider here. And it still support two-way binding (i.e. from extender to label but not from bounded textbox to extender).
<asp:TextBox ID="Slider1" runat="server" />
<br />
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" BehaviorID="Slider1"
TargetControlID="Slider1" Minimum="1" Maximum="3" BoundControlID="Slider1_BoundControl"
Steps="5">
<Items>
<asp:ListItem Value="1" Text="Low" />
<asp:ListItem Value="2" Text="Medium" />
<asp:ListItem Value="3" Text="High" />
</Items>
</ajaxToolkit:SliderExtender>
<asp:TextBox runat="server" ID="Slider1_BoundControl" />
<%--<asp:Label ID="Slider1_BoundControl" runat="server" Style="text-align: right" />--%>