### jQuery UI Slider

Example of how to get and set the value of the Slider value in a label.
These are code snippets. See //Information > Value Project Examples for a full demo.
HTML define the slider (file index.html )
...
<div id="slider"></div>
<p class="note">Slider value: <span id="slidervalue">0</span></p>
...
...
<script>
//Set the slider properties
$(function(){
var slidervalue = $('#slidervalue');
$("#slider").slider({
max: 100,
min: -100,
orientation :"horizontal",
slide: function(event, ui) {
slidervalue.html(ui.value);
b4j_raiseEvent("update_slidervalue", {value: ui.value});
}
});
});
</script>
B4J WebSocket Class (bas file)
`Sub Class_Globals
Private ws As WebSocket
Private slidervalue As JQueryElement 'Value of the slider position
...
End Sub`
'Get the slider value and update the html label as defined in index.html
`Public Sub Update_SliderValue(Params As Map)
Dim val As String = Params.Get("value")
slidervalue.SetText(val)
End Sub`
Additions
Set the slider position
HTML
<p><button id="slidersetvalue" title="Set the new slider value">Set Slider Value:</button><input type="number" value="0" min="-100" max="100" Id="newslidervalue" ></input></p>
B4J
`Sub Class_Globals
Private ws As WebSocket
'Selector Labels
Private slider As JQueryElement 'The slider
Private slidervalue As JQueryElement 'Value of the slider position
...
'Set the new slider value from the newslidervalue input field
`Private Sub slidersetvalue_click(Params As Map)
Dim val As String = newslidervalue.GetVal.Value
ws.Eval("$( ""#slider"" ).slider( ""value"", " & val & " );", Null)
slidervalue.SetText(val)
End Sub`
`

Changed: , Category: WebApps jQuery, File: T6C280M2104.htm, ID: 2104