So... a customer had a little problem with a slider in SharePoint. I had no idea what she was talking about, but i thought that this might be interesting.
I google searched about the slider functions in jquery, which are indeed very nice. After playing around for a while I finally came up with this little slider, see code below.
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider
{
margin: 10px;
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#slider .ui-slider-range { background: #ef2929; }
#slider .ui-slider-handle { border-color: #ef2929; }
</style>
</style>
<script type="text/javascript">
$(document).ready(function()
{
$("#slider").slider(
{
enable: true,
animate: true,
max: 100,
min: 0,
step: 1,
range: "min",
orientation: "horizontal",
slide: function(event, ui)
{
$("#amount").val(ui.value+'%');
}
});
$("#amount").val($("#slider").slider("value")+ '%');
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider">
</div><br>
<input type="text" id="amount" style="border:0; color:#000000; font-weight:bold;" />
</body>
</html>
But what does actually happen here? It isn't that hard to explain, but hard to search for solutions all over the internet.
To begin with, just implement your sources for JQuery:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
And with this little piece of code you adjust your css:
#slider
{
margin: 10px;
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#slider .ui-slider-range { background: #ef2929; }
#slider .ui-slider-handle { border-color: #ef2929; }
Until now nothing happens. Let's take a look why the slider slides to the left and to the right.
There is a lot of stuff in this function. First of all you call the slider function from JQuery.
$(document).ready(function()
{
$("#slider").slider(
{
enable: true,
animate: true,
max: 100,
min: 0,
step: 1,
range: "min",
orientation: "horizontal",
slide: function(event, ui)
{
$("#amount").val(ui.value+'%');
}
});
$("#amount").val($("#slider").slider("value")+ '%');
});
This little piece is the configuration of the slider:
enable: true,
Display the value.
animate: true,
Animate the slider instead of letting it jump from start to the choosen point.
max: 100,
The max value.
min: 0,
The max value.
step: 1,
Size of the steps, which are able to take.
range: "min",
This is needed to color the bar.
orientation: "horizontal",
display a horizontal bar.
slide: function(event, ui)
{
$("#amount").val(ui.value+'%');
}
});
$("#amount").val($("#slider").slider("value")+ '%');
This function is simply to display the value which is selected.
And that's that. Now you can slide all day long. The value will not be stored anywhere, so after a refresh it's gone.