JQuery Slider variable change

Hello,

I have the attached code and I would like to to change from:

===[]===[]===
250000 to 450000

to

===[]===[]===
$250k-$450k


I would like the denominations to go from 200-4k in hundreds then from 4k-1mil by +50K then 1mil - 20mil in +500K

I hope that makes sense, I would really appreciate any help, I have been having a hard time with it.

I would like the numbers to be with a K at the end and the 000 removed then mil at the end and the 00,000 removed, ie 1.5mil 2mil etc.

Thanks,
Matt

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

		<script type="text/javascript">
			$("#slider-range").slider({
				range: true,
				min: 500,
				max: 4000000,
				values: [350000, 500000],
				slide: slidePrice
			});
			function slidePrice(event, ui){
				var dollars0 = parseInt($("#slider-range").slider("values", 0));
				var dollars1 = parseInt($("#slider-range").slider("values", 1));
				$("#price").text(getPrice(dollars0) + ' to ' + getPrice(dollars1));
			}
			function getPrice(dollars) {
				var price = null;
				return dollars;
			}
			slidePrice();
		</script>

Open in new window

LVL 1
movieprodwAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mark_FreeSoftwareCommented:
attached code formats the numbers almost as you wanted, only the steps are not 50 / 500 but 10 and 100, gives this result:

$11
$111
$1.1k
$11k
$0.11mil
$1.1mil
$11.1mil
$111.1mil
$1111.1mil
$11111.1mil



function format_price( input )
{
	var outstr = '$';
	if( input < 200 ) {
		outstr += input;
	} else if( input < 4000 ) {
		outstr += ((input-(input%100))/1000) + 'k';
	} else if( input < 100000 ) {
		outstr += ((input-(input%1000)) / 1000) + 'k';
	} else if( input < 1000000 ) {
		outstr += ((input-(input%10000)) / 1000000) + 'mil';
	} else {
		outstr += ((input-(input%100000)) / 1000000) + 'mil';
	}
	return outstr;
}
var aaa = "";
aaa += format_price( 11 ) + "\n";
aaa += format_price( 111 ) + "\n";
aaa += format_price( 1111 ) + "\n";
aaa += format_price( 11111 ) + "\n";
aaa += format_price( 111111 ) + "\n";
aaa += format_price( 1111111 ) + "\n";
aaa += format_price( 11111111 ) + "\n";
aaa += format_price( 111111111 ) + "\n";
aaa += format_price( 1111111111 ) + "\n";
aaa += format_price( 11111111111 ) + "\n";
alert( aaa );

Open in new window

0
movieprodwAuthor Commented:
This looks great, I am a bit confused as to where to place that in the code, I tried to do it but am getting an error.

Thanks so much for your help.

Matt
0
Mark_FreeSoftwareCommented:
you can either put it in a seperate .js file (only the function, not the var aaa stuff, that is just for testing)
and include that in the header,
make a new <script type="text/javascript">
block in the header, or add it between:
<script type="text/javascript">
and
$("#slider-range").slider({

0
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

Mark_FreeSoftwareCommented:
oh, the function starts at:
function format_price( input )
and ends at
}
(the line directly before
var aaa = "";
)
0
movieprodwAuthor Commented:
Sorry if I am being really stupid here but I inserted the code as you suggested and it just errors out. Please see the attached code.

Thanks!
0
movieprodwAuthor Commented:
code
<script type="text/javascript">
		
			function format_price( input )
			{
			var outstr = '$';
			if( input < 200 ) {
					outstr += input;
			} else if( input < 4000 ) {
					outstr += ((input-(input%100))/1000) + 'k';
			} else if( input < 100000 ) {
					outstr += ((input-(input%1000)) / 1000) + 'k';
			} else if( input < 1000000 ) {
					outstr += ((input-(input%10000)) / 1000000) + 'mil';
			} else {
					outstr += ((input-(input%100000)) / 1000000) + 'mil';
			}
			return outstr;

			$("#slider-range").slider({
				range: true,
				min: 500,
				max: 4000000,
				values: [350000, 500000],
				slide: slidePrice
			});
			function slidePrice(event, ui){
				var dollars0 = parseInt($("#slider-range").slider("values", 0));
				var dollars1 = parseInt($("#slider-range").slider("values", 1));
				$("#price").text('Search in the price range from $' + getPrice(dollars0) + ' to $' + getPrice(dollars1));
				$("input[name=dollars0]").val( dollars0 );
				$("input[name=dollars1]").val( dollars1 );
			}
			function getPrice(dollars) {
				var price = null;
				return dollars;
			}
			slidePrice();
		</script>

Open in new window

0
Mark_FreeSoftwareCommented:
after 'return outstr;'
you forgot a closing brace:
}

0
movieprodwAuthor Commented:
Mark,

Your correct, I did forget that and now the script functions but it is still not formatting the numbers.

Do I need to alter something in the part below your code to call for the change?
<script type="text/javascript">
	function format_price( input )
{
        var outstr = '$';
        if( input < 200 ) {
                outstr += input;
        } else if( input < 4000 ) {
                outstr += ((input-(input%100))/1000) + 'k';
        } else if( input < 100000 ) {
                outstr += ((input-(input%1000)) / 1000) + 'k';
        } else if( input < 1000000 ) {
                outstr += ((input-(input%10000)) / 1000000) + 'mil';
        } else {
                outstr += ((input-(input%100000)) / 1000000) + 'mil';
        }
        return outstr;
}

			$("#slider-range").slider({
				range: true,
				min: 500,
				max: 4000000,
				values: [350000, 500000],
				slide: slidePrice
			});
			function slidePrice(event, ui){
				var dollars0 = parseInt($("#slider-range").slider("values", 0));
				var dollars1 = parseInt($("#slider-range").slider("values", 1));
				$("#price").text('Search in the price range from $' + getPrice(dollars0) + ' to $' + getPrice(dollars1));
				$("input[name=dollars0]").val( dollars0 );
				$("input[name=dollars1]").val( dollars1 );
			}
			function getPrice(dollars) {
				var price = null;
				return dollars;
			}
			slidePrice();
		</script>

Open in new window

0
Mark_FreeSoftwareCommented:
change this line:
$("#price").text('Search in the price range from $' + getPrice(dollars0) + ' to $' + getPrice(dollars1));
to this:
$("#price").text('Search in the price range from $' + format_price(dollars0) + ' to $' + format_price(dollars1));

and remove the function getPrice:

                        function getPrice(dollars) {
                                var price = null;
                                return dollars;
                        }

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mark_FreeSoftwareCommented:
oh, if the code you are writing / testing somehow doesnt work, open firefox
from the tools menu open the error console (or press ctrl+shift+j), click on the Clear button.
then load the page you are testing, all errors will show up with the red cross infront, those need fixing.
all warnings (yellow exclamation mark) do not need fixing for the page to function correctly, byt might indicate a mistyped css or html element
0
movieprodwAuthor Commented:
Cool, you missed the 0 in the K part it was going from 100K > 0.2 mil

Thanks so much, this was a lot of fun, make sure to check out some of my other questions :-)
0
movieprodwAuthor Commented:
Can you make it so that if they get to the max 4000000 it just says 'No Limit'?
0
Mark_FreeSoftwareCommented:
is the max a fixed number or is that changable?
0
Mark_FreeSoftwareCommented:
if it is a fixed number, this should work:



function format_price( input )
{
	var outstr = '$';
	if( input < 200 ) {
		outstr += input;
	} else if( input < 4000 ) {
		outstr += ((input-(input%100))/1000) + 'k';
	} else if( input < 100000 ) {
		outstr += ((input-(input%1000)) / 1000) + 'k';
	} else if( input < 1000000 ) {
		outstr += ((input-(input%10000)) / 1000000) + 'mil';
	} else if( input >= 4000000 ) {
		outstr = 'No Limit';
	} else {
		outstr += ((input-(input%100000)) / 1000000) + 'mil';
	}
	return outstr;
}

Open in new window

0
movieprodwAuthor Commented:
Your the best!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.