Solved

Range Slider

Posted on 2012-04-12
18
314 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

734 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