asked on

inserting text element based on JQuery UI slider value

Ok, so I am using the jquery ui range slider and I need a "+" to appear in my form field when the slider reaches the maximum value. For example, my range is from 0 - 100000, so when the slider hits 100000, I want to see "100000+",but when I drop it to 99000 I want the plus sign to go away (I am stepping in intervals of 1000)

I need this to work with the jquery-ui-1.7.2.custom.min.js file you download at the ui site so I can use the theme I rolled.

Anyway, if you could look at my code and tell me what to add, you would be awesome. Thanks for the help.

//this is what I have so far that works

<script type="text/javascript">
	$(function() {
		$("#slider-range").slider({
			range: true,
			min: 0,
			max: 100000,
			step: 1000,
			values: [0, 100000],
			slide: function(event, ui) {
				$("#range_start").val(ui.values[0]);
				$("#range_end").val(ui.values[1]);
			}
		});
		$("#range_start").val( $("#slider-range").slider("values", 0));
		$("#range_end").val( $("#slider-range").slider("values", 1));
	});
</script>


//body below

<div class="demo">

	<span class="paragraph">Find me all the ships betweeen
	<input name="start_range" type="text" class="table_text" id="start_range" size="7" maxlength="7" />
	and
	<input name="end_range" type="text" class="table_text" id="end_range" size="7" maxlength="7" />
	metric tons dwt.
	</span>

	<div id="slider-range"></div>

</div><!-- End demo -->

Open in new window

TedInAK

It would be a great help if you could post a working example file(s). The above code does not show a slider.

joshuajohnhutchison

ASKER

Sorry, here is a working file.
slider-test.php

Seo_Expert

Hello joshuajohnhutchison:

Below is the working code replace your javascript with below code

<script type="text/javascript">
        $(function() {
                $("#slider-range").slider({
                        range: true,
                        min: 0,
                        max: 100000,
                        step: 1000,
                        values: [0, 100000],
                        slide: function(event, ui) {
                                if(ui.values[0]==100000){
								$("#start_range").val(ui.values[0]+"+");
								}
								else{
									$("#start_range").val(ui.values[0]);
								}
                                $("#end_range").val(ui.values[1]);
								
                        }
                });
                $("#start_range").val( $("#slider-range").slider("values", 0));
                $("#end_range").val( $("#slider-range").slider("values", 1));
        });
</script>

Open in new window

TedInAK

Change your slider code to this:

$("#slider-range").slider({
	range: true,
	min: 0,
	max: 100000,
	step: 1000,
	values: [0, 100000],
	slide: function(event, ui) {
		var min = ui.values[0]
		var max = ui.values[1]
		if (min == max) { max += '+' }
		$("#range_start").val(min);
		$("#range_end").val(max);
	}
});

Open in new window

joshuajohnhutchison

ASKER

Seo Expert,

That works perfect, except it does not initialize with the plus sign. Is that a quick fix?

ASKER CERTIFIED SOLUTION

Seo_Expert

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

joshuajohnhutchison

ASKER

Excellent. Talk about an easy 500 points huh? I'm glad my JQuery retardedness helped someone out. Thanks dude.

Note to anyone who views this solution in the future. To get the exact effect I wanted, all I had to do was move this experts code from ui.value[0] to ui.value[1] just because I didn't want the first field to have the plus sign.