Monday, 21 January 2013 13:55

how to use jquery slider in asp.net page

Written by 
Rate this item
(2 votes)

if you want to use nice jquery slider in your asp.net website
follow the steps below -

first add appropriate html div's
<div id="container">
<div class="slider_container">
<div id="slider_callout">
<asp:TextBox ID="textbox" runat="server" CssClass="slider_callout" />
<div class="slider_bar_wish">
<div id="slider1_handle" class="slider_handle"></div>
</div>
</div>
</div>

now implement jquery slider by the following scripts
in the head section of your page -

<script type="text/javascript">
function pageLoad() {
$(function () {
$("#slider_callout").hide();
$(".slider_bar_wish").slider({
handle: ".slider_handle",
minValue: 0,
maxValue: 10,
value: 0, //you can set the value
start: function (e, ui) {
$("#slider_callout").fadeIn('fast');
},
stop: function (e, ui) {
},
slide: function (e, ui) {
$(".slider_callout").val(Math.round(ui.value * (10 / 100)));

}
});
});
}
</script>

make sure you added jquery and jquery ui script declaration at first in head section.
Hope this helped you.Don't forget to like and share it.

Read 2501 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments