?
Solved

Range Slider

Posted on 2012-04-12
18
Medium Priority
?
318 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
How To Install Bash on Windows 10

Windows’ budding partnership with Canonical has certainly led to some great improvements. One of them being the ability to use Bash on your Windows machine without third party applications! This might be one of the greatest things a cloud engineer in a Windows environment can do!

 

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
 

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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

765 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