CODEWITHSUNDEEP
jquerysliderdraggable
Frank Clark
Frank Clark

Reputation: 195

How to create a jQuery price slider

I have been trying to find a tutorial but had had no luck. I'm not asking anyone to do the work for me but more to see if anyone knows anything useful.

so basically i need my slider to to have a minimum value of zero and a dynamically set maximum value (getting the dynamic value is not an issue).

0 -------------------o------------------ 200

So the 'o' in the middle would be your clickable sliding element. I need it to output in a box to the right the number that you are on. So in this example it would output 100. Very much like setting the volume on a video player.

Basically this is for a reward point system, so people can slider across how many reward points they have and it will output how many pounds this is the equivalent of.

As i said im more looking for help finding a tutorial but would always be grateful if someone could post a snippet that would push me in the right direction.

Upvotes: 2

Views: 4291

Answers (2)

Ranjita Paul
Ranjita Paul

Reputation: 185

Try this:

http://jquerymobile.com/demos/1.0a2/#docs/forms/forms-slider.html

<body class=""> 
<link rel="stylesheet" href="jquery.css">

<script src="jquery-1.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<div class="" id="" data-role="page">

<div class="ui-field-contain ui-body ui-br" data-role="fieldcontain">
<input class="" name="slider" id="slider" value="100" min="0" max="10" data-type="range">
</div>

Upvotes: 3

CR41G14
CR41G14

Reputation: 5594

Take a look at http://jqueryui.com/slider/#range

This will give you a range slider for values like you require

Upvotes: 3

Related Questions