Slider values "Or less" and "Or more"

[Webbot]

Explanations in this text is based on a example where minimum range value is 40 and maximum is 60. http://jsfiddle.net/77SsQ/4/

Situation
I have a UI range slider (see code below text) that have two values, one for minimum (left handlebar) and one for maximum (right handlebar). This result in a fixed range of numers to search, one minimum number and one maximum number.

Missing features
I want to be able to set unlimited minimum and maximum values, so when the left handlebar is set to 40 it search for all results with value 40 and below, and when the right handlebar is set to 60 it search for all results with value 60 and above. This means that if a visitor set the left handlebar to 50 (middle of slider), and the right handlebar to maximum, it will search for all values above.

In the code is not such of a problem becuse all results under 40 can be set to 40 and all over 60 can be set to 60, so when the handlebar is set for example 60 its search for all values over 60.

Problem
The problems is the labels, the visible part of the slider. All numbers between 41 and 59 should be just as usual, but when the left handlebar is set to 40 it should show "40 or less" and when the right handlebar is set to 60 it should show "60 or more".

Here is the code to the slider:

$(function() {
    $( "#range" ).slider({
        range: true,
        min: 40,
        max: 60,
        values: [ 40, 60 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "" + $( "#range" ).slider( "values", 0 ) + " - " + $( "#range" ).slider( "values", 1 ) );
});
​

Does anybody have an idea how to solve this?

Thanks.

Edit: Here is a jdfiddle with the slider: http://jsfiddle.net/77SsQ/4/

[Webbot]

Some progress: http://jsfiddle.net/77SsQ/27/

Now the slider acts like I want (at jsfiddle page) but now it dont show up in the page becuse its not getting initialized/executed (I guess) becuse its get loaded in from another page.

This is how the code to a functioning slider in page looks like:

function initializeSlider(){
	$( "#range" ).slider({
		range: true,
		min: 40,
		max: 60,
		step: 1,
		values: [ 40, 60 ],
		slide: function( event, ui ) {
			$( "#amount" ).val( "Value: " + ui.values[ 0 ] + " - " + ui.values[ 1 ] + "");
		}
	});
	$( "#amount" ).val( "Value: " + $( "#range" ).slider( "values", 0 )+ " - " + $( "#range" ).slider( "values", 1 ) + "");
};
$(initializeSlider);

And this is how this code looks like:

$('#range').slider({
		range: true,
		min: 40,
		max: 60,
		step: 1,
		values: [40, 60],
		slide: function(event, ui) {
			$('#amount').val("" + getLabel(ui.values[0]) + ' - ' + getLabel(ui.values[1]));
		}
	});
      $('#amount').val("" + getLabel($('#range').slider('values', 0)) + ' - ' + getLabel($('#range').slider('values', 1)));

function getLabel(value) {
      return (value == 40 ? '40 or less' : (value == 60 ? '60 or more' : value));
}​

Does anybody know how to initialize the last slider just like the first slider initializes?

Thanks.

[xelawho]

not entirely sure that I understand the problem, but does this help?

$(function() {
    $( "#range" ).slider({
        range: true,
        min: 40,
        max: 60,
        values: [ 40, 60 ],
        slide: function( event, ui ) {
            var minv=ui.values[0]==40?"40 or less":ui.values[0];
            var maxv=ui.values[1]==60?"60 or more":ui.values[1];
            $( "#amount" ).val( "" + minv + " - " + maxv );
            }
        });
        $( "#amount" ).val( "" + $( "#range" ).slider( "values", 0 ) + " - " + $( "#range" ).slider( "values", 1 ) );
});

[Webbot]

Originally Posted by xelawho

not entirely sure that I understand the problem, but does this help?

No that dident help but I will try to explain the problem better. The slider is placed in a div in a external page (example Page2 #2) and this content gets loaded via jQuery to a div (example #div1) in Page1 based on choises in a select-dropdown. The select alternatives look kinda like this:

<option>Option1</option>
<option>Option2</option>
<option>Option3</option>

$(document).ready(function(){ 
$("#selectbox").change(function(){ 
	var selectedOption = $('#selectbox :selected').val(); 
	$containerDiv = $('#div1'); 
	$containerDiv.html("");
        switch (selectedOption)
        {
        case "Option1":$containerDiv.load( "page2.html#div1", initializeSlider ); break;
        case "Option2":$containerDiv.load( "page2.html#div2", initializeSlider ); break;
        case "Option3":$containerDiv.load( "page2.html#div3", initializeSlider ); break;
       }
	return true;
	}); 
});

To this code:

function initializeSlider(){
	$( "#range" ).slider({
		range: true,
		min: 40,
		max: 60,
		step: 1,
		values: [ 40, 60 ],
		slide: function( event, ui ) {
			$( "#amount" ).val( "Value: " + ui.values[ 0 ] + " - " + ui.values[ 1 ] + "");
		}
	});
	$( "#amount" ).val( "Value: " + $( "#range" ).slider( "values", 0 )+ " - " + $( "#range" ).slider( "values", 1 ) + "");
};
$(initializeSlider);

So when the div gets loaded in the sliders initializes. I dont know what to add to this new slider to make it initialize just like the other slider.

This is the code for the new slider (same as in the first post):

$('#range').slider({
		range: true,
		min: 40,
		max: 60,
		step: 1,
		values: [40, 60],
		slide: function(event, ui) {
			$('#amount').val("" + getLabel(ui.values[0]) + ' - ' + getLabel(ui.values[1]));
		}
	});
      $('#amount').val("" + getLabel($('#range').slider('values', 0)) + ' - ' + getLabel($('#range').slider('values', 1)));

function getLabel(value) {
      return (value == 40 ? '40 or less' : (value == 60 ? '60 or more' : value));
}​

[xelawho]

mmm.., I guess you would have to explain what you mean by initialize, and maybe what is the advantage in having the slider on another page, rather than just in a hidden div, and I guess really what exactly is going wrong and what you expect to happen....

[Webbot]

Originally Posted by xelawho

mmm.., I guess you would have to explain what you mean by initialize, and maybe what is the advantage in having the slider on another page, rather than just in a hidden div, and I guess really what exactly is going wrong and what you expect to happen....

I think I soon will try to execute the load-in-content with .live() function insteed.

The sliders is in a different page and gets loaded in to a div (based on choice in a dropdown different content will be loaded) becuse the content with the sliders is much code so its not necessary to have it loaded at pageload if the content is not used.