Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Range Slider

Posted on 2012-04-12
18
Medium Priority
?
321 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
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Ready to get certified? Check out some courses that help you prepare for third-party exams.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

618 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