Solved

Range Slider

Posted on 2012-04-12
18
304 Views
Last Modified: 2012-04-16
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!
0
Comment
Question by:dshrenik
  • 11
  • 7
18 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 37842161
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
 

Author Comment

by:dshrenik
ID: 37843254
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
 
LVL 82

Expert Comment

by:leakim971
ID: 37843278
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
 

Author Comment

by:dshrenik
ID: 37843501
That would be perfect if I could do the following: Resize only horizontally up to a certain limit

Thanks!
0
 

Author Comment

by:dshrenik
ID: 37843552
Can it be done by fixing minHeight and maxHeight to the same value?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37843555
for sure!
0
 

Author Comment

by:dshrenik
ID: 37843569
Great! But, how do I resize just the handle? I want to use this slider:
http://jqueryui.com/demos/slider/#default
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37843924
$(".ui-slider-handle").resizable()
0
 

Author Comment

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

Thanks!
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:dshrenik
ID: 37852627
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
 

Author Comment

by:dshrenik
ID: 37852832
I am able to resize the whole slider, but not just the handle.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 37852848
>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
 

Author Comment

by:dshrenik
ID: 37852854
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
 
LVL 82

Expert Comment

by:leakim971
ID: 37852863
>I am able to resize the whole slider, but not just the handle.

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

Author Comment

by:dshrenik
ID: 37852893
If possible, could you please post your code?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 37852894
	<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
 

Author Comment

by:dshrenik
ID: 37852929
Thanks!
0
 

Author Comment

by:dshrenik
ID: 37853044
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

912 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now