asked on

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

Mark_FreeSoftware

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

movieprodw

ASKER

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

Mark_FreeSoftware

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

Mark_FreeSoftware

oh, the function starts at:
function format_price( input )
and ends at
}
(the line directly before
var aaa = "";
)

movieprodw

ASKER

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!

movieprodw

ASKER

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

Mark_FreeSoftware

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

movieprodw

ASKER

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

ASKER CERTIFIED SOLUTION

Mark_FreeSoftware

membership

This solution is only available to members.

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

Start Free Trial

Mark_FreeSoftware

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

movieprodw

ASKER

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

movieprodw

ASKER

Can you make it so that if they get to the max 4000000 it just says 'No Limit'?

Mark_FreeSoftware

is the max a fixed number or is that changable?

Mark_FreeSoftware

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

movieprodw

ASKER

Your the best!