Range Slider

dshrenik
dshrenik used Ask the Experts™
on
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!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
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)

Author

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.
leakim971Multitechnician
Top Expert 2014

Commented:
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;
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
That would be perfect if I could do the following: Resize only horizontally up to a certain limit

Thanks!

Author

Commented:
Can it be done by fixing minHeight and maxHeight to the same value?
leakim971Multitechnician
Top Expert 2014

Commented:
for sure!

Author

Commented:
Great! But, how do I resize just the handle? I want to use this slider:
http://jqueryui.com/demos/slider/#default
leakim971Multitechnician
Top Expert 2014

Commented:
$(".ui-slider-handle").resizable()

Author

Commented:
I'm not sure why I'm not able to integrate the two. If possible, could you please post some sample code.

Thanks!

Author

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

Author

Commented:
I am able to resize the whole slider, but not just the handle.
leakim971Multitechnician
Top Expert 2014

Commented:
>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

Author

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!
leakim971Multitechnician
Top Expert 2014

Commented:
>I am able to resize the whole slider, but not just the handle.

$(".ui-slider-handle").resizable() work fine for me :
Clipboard02.jpg

Author

Commented:
If possible, could you please post your code?
Multitechnician
Top Expert 2014
Commented:
	<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

Author

Commented:
Thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial