• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 697
  • Last Modified:

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

0
joshuajohnhutchison
Asked:
joshuajohnhutchison
  • 3
  • 2
  • 2
1 Solution
 
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
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now