Solved

Range Slider

Posted on 2012-04-12
18
311 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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 

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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
displaying 3 dropdownlist  horizontally 3 31
Duplicate Elements with JS / jQuery 3 24
Exchange OWA website Redirection 7 40
Table style position to the left 8 24
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
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?
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

735 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