Range Slider

Please let me know if there's a range slider available that looks like the one below, and also satisfies the following requirement:

The user must be able to move around the entire area (range) between the two handles together such that the difference between the limits remains constant.

http://jqueryui.com/demos/slider/#range

Thanks!
dshrenikAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
	<style>
	#demo-frame > div.demo { padding: 10px !important; }
	</style>
	<script>
	$(function() {
		$( "#slider" ).slider();
                $(".ui-slider-handle").resizable({resize: function(event, ui) { alert("new width:" + $(".ui-slider-handle").width(); ) }});
                
	});
	</script>



<div class="demo">

<div id="slider"></div>

</div><!-- End demo -->



<div class="demo-description">
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
</div><!-- End demo-description -->

Open in new window

0
 
leakim971PluritechnicianCommented:
so what you want is not two handles but one, a largest one. so you move it you know minValue and you are able to find maxValue (minValue + width)
0
 
dshrenikAuthor Commented:
That would be nice.

But what I really need is 3 handles. One to change min value, one did max and then the bar between the min and Max handles should also be a handle.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
leakim971PluritechnicianCommented:
what about using http://jqueryui.com/demos/resizable/

so you resize your slider, you know width so you know min and max

min = posMiddle - width/2;
max = posMiddle - width/2;
0
 
dshrenikAuthor Commented:
That would be perfect if I could do the following: Resize only horizontally up to a certain limit

Thanks!
0
 
dshrenikAuthor Commented:
Can it be done by fixing minHeight and maxHeight to the same value?
0
 
leakim971PluritechnicianCommented:
for sure!
0
 
dshrenikAuthor Commented:
Great! But, how do I resize just the handle? I want to use this slider:
http://jqueryui.com/demos/slider/#default
0
 
leakim971PluritechnicianCommented:
$(".ui-slider-handle").resizable()
0
 
dshrenikAuthor Commented:
I'm not sure why I'm not able to integrate the two. If possible, could you please post some sample code.

Thanks!
0
 
dshrenikAuthor Commented:
Also, please let me know how I can retrieve the width of the handle. Thanks!

Please answer the question here:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27674757.html#a37844233
0
 
dshrenikAuthor Commented:
I am able to resize the whole slider, but not just the handle.
0
 
leakim971PluritechnicianCommented:
>Also, please let me know how I can retrieve the width of the handle. Thanks!

var slider_width = $(".ui-slider-handle").width();

Open in new window

0
 
dshrenikAuthor Commented:
Thanks!

If possible, could you please post some sample code as to how just the handle can be resized? I am able to resize the slider as whole, but not just the handle.

Thanks!
0
 
leakim971PluritechnicianCommented:
>I am able to resize the whole slider, but not just the handle.

$(".ui-slider-handle").resizable() work fine for me :
Clipboard02.jpg
0
 
dshrenikAuthor Commented:
If possible, could you please post your code?
0
 
dshrenikAuthor Commented:
Thanks!
0
 
dshrenikAuthor Commented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.