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

LVL 1
joshuajohnhutchisonAsked:
Who is Participating?
 
Seo_ExpertCommented:
Hi,

You want plus sign in Max Value at initialize then below is the 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

0
 
TedInAKCommented:
It would be a great help if you could post a working example file(s).  The above code does not show a slider.
0
 
joshuajohnhutchisonAuthor Commented:
Sorry, here is a working file.
slider-test.php
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

0
 
TedInAKCommented:
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

0
 
joshuajohnhutchisonAuthor Commented:
Seo Expert,

That works perfect, except it does not initialize with the plus sign.  Is that a quick fix?
0
 
joshuajohnhutchisonAuthor Commented:
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.  
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.