Im having trouble with the min and max values of the jQuery Slider UI. I set the min value to 5000 and the max value to 1000000 with 25000 step increments. However when I view it on the front-end I get the following:
Here is my code:
$( "#slider-range" ).slider({
range: true,
step:25000,
min: 5000,
max: 1000000,
values: [ 5000, 1000000 ],
slide: function( event, ui ) {
$( "#657401867-MinPrice" ).val( (ui.values[ 0 ] + "").replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") );
//$( "#MinPrice" ).text( ui.values[ 0 ] );
$( "#657401867-MaxPrice" ).val( (ui.values[ 1 ] + "").replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") );
//$( "#MaxPrice" ).text( ui.values[ 1 ] ); ($( "#slider-range" ).slider( "values", 0 ) + "").replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}
});
So for some reason, on the front end it has the max value as 980,000 instead of 1,000,000.
This is probably because the step value is 25,000. If you increment your min of 5,000 by 25,000, the largest possible value is 980,000, since your max is 1,000,000. I'd recommend changing the step value to 5,000 to solve this issue.
Starting from 5,000 (your min value), in steps of 25,000 (step value), the highest step lower than 1,000,000 (your max) is actually 980,000.
In order to avoid this you should do on of these options:
Change the step to be 5,000
Set the min value to be 0 or 25,000
Change max value to 1,005,000
Related
Firstly, please note I am new to jQuery and have limited js experience, so this may be a silly question, but I have no one to ask for help.
I have a jQuery range slider which provides two year values. I have successfully created a variable which contains both the minimum and maximum year.
I am unsure how to update the min/max year variables after the user interacts with the range slider.
I need the the min/max year values as variables to use as a filter for a map/geojson query.
I have tried to declare the variable equal to ui.value(0) and ui.value[0], but that is as far as I have gotten. (example: yrmin = ui.value[0]; )
The only thing I know for certain is that I don't know enough. Any direction, comments, suggestions, or links to related exercises/ problems etc would be so incredibly helpful.
var yrmin = '';
var yrmax = '';
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 1900,
max: 2020,
values: [ 1945, 1995 ],
slide: function( event, ui ) {
$( "#amount" ).val( " " + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
}
});
$( "#amount" ).val( " " + $( "#slider-range" ).slider( "values", 0 ) +
" - " + $( "#slider-range" ).slider( "values", 1 ) );
yrmin = $("#slider-range").slider("values", 0);
yrmax = $("#slider-range").slider("values", 1);
});
When I use the the yrmin = ui.value(0); the console logs a ui not defined error..
You can use (window), but I do recommend to avoid the global approach as much as you can
window scope
window.yrmin = $("#slider-range").slider("values", 0);
window.yrmax = $("#slider-range").slider("values", 1);
JSFIDDLE
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 5,
min: 0,
step: .5,
max: 10,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value);
$(".a, .b, .c, .d").width(ui.value + "0%");
}
});
$(".ui-slider-handle").text("<>");
$( "#amount" ).val( $("#slider-range-min" ).slider("value") );
});
As you can see, the width of the visual bar works perfectly on integers, but starts acting up on half-steps.
I'm still learning the basics of jquery, but I would imagine there's a way for me to set the bar max value to 20, ignore the .5 step, and translate the output as an array like so
Bar Position | Value Displayed
1 | 0.5
2 | 1.0
3 | 1.5
4 | 2.0
...
20| 10
The way that you're calculating the width of your elements is the problem. You're adding 0% to the end.
So a value of 1 = 10%, 2 = 20%, 3 = 30%, etc. However, with your half steps, this pattern breaks. 1.5 = 1.50%, 2.5 = 2.50%, 3.5 = 3.50%, etc.
You need to multiply, not add. Do this:
$(".a, .b, .c, .d").width(ui.value * 10 + "%");
That will fix your problem. I updated the fiddle: http://jsfiddle.net/w6o28751/2/
I'm developing an APP using jquery mobile with phonegap. Have a trouble when trying to retrieve the value of a slider, for some reason I can't take it, i've got something like
$(document).ready(function() {
var iValue = 0;
$("#sliderVer").uislider({
min : 10,
max : 100,
orientation : "vertical",
step : 1,
value : iValue
});
$("#incomplete_field_correo").hide();
$("#incomplete_field_secret").hide();
$("#incorrect_field_correo").hide();
});
I've tried with
$("sliderVer").value;
also
$("sliderVer").slider( "value" );
and
$("sliderVer").slider( ui.slider );
But nothing seems to work, any idea?
thanks in advance!
Get or set the value option, after initialization:
// getter
var value = $( ".selector" ).slider( "option", "value" );
// setter
$( ".selector" ).slider( "option", "value", 10 );
http://api.jqueryui.com/slider/#option-value
I want to multiply the number of minutes per day, whose value is defined by the slider, by a specified number (like 0.05). Then I want to multiply that by 30 so that it is a rough monthly estimate. Then I want to display that value beside my "Estimated Monthly Bill" paragraph near the bottom.
Ex.
monthlyEstimate = slidervalue * .05 * 30
The slider is borrowed from the jQuery UI website. Here is the code:
<head>
<script>
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 1,
min: 1,
max: 150,
slide: function( event, ui ) {
$( "#amount" ).val( "" + ui.value );
}
});
$( "#amount" ).val( "" + $( "#slider-range-min" ).slider( "value" ) );
});
</script>
</head>
<body>
<style>
#slider-range-min{
width: 200px;
height:10px;
}
</style>
<div id="estimate">
<p>
<label for="amount">Minutes Per Day:</label>
<input type="text" id="amount" style="border: 0; color: #B01D63; font-family: Signika;" />
</p>
<div id="slider-range-min"></div>
<br />
<p>
Estimated Monthly Bill:
</p>
Add a span below your estimated monthly bill text so we can put the value in to a specified place:
HTML
<p>
Estimated Monthly Bill:
<span id="EstimatedMonthlyBill"></span>
</p>
Then change your slider slide property to do the calculation and insert the value:
Javascript
$(function() {
$("#slider-range-min").slider({
range: "min",
value: 1,
min: 1,
max: 150,
slide: function(event, ui) {
$("#amount").val("" + ui.value);
var estimatedMonthlyBill = Math.round(100 * (parseFloat(ui.value) * .05 * 30)) / 100;
$("#EstimatedMonthlyBill").text(estimatedMonthlyBill);
}
});
$("#amount").val("" + $("#slider-range-min").slider("value"));
});
Demo
http://jsfiddle.net/2FMRU/
Change
<p>
Estimated Monthly Bill:
</p>
To
<p>
Estimated Monthly Bill: <span id='estimate'></span>
</p>
We will use jQuery to up date the span named estimate when the slider is moved. * is the operator for multiplication in javascript. In the code below, replace SOME_CONSTANT to whatever you need it to be. Most decimal numbers eg. 100.234,0.00005 should work fine.
Change
slide: function( event, ui ) {
$( "#amount" ).val( "" + ui.value );
}
To something like this:
slide: function( event, ui ) {
$( "#amount" ).val( "" + ui.value );
$("#estimate").val("" + (ui.value*SOME_CONSTANT*30) );
}
When the slider is moved, the <span id='estimate'> will be updated to display the calculated value.
I hope this is what you were looking for.
I'm trying to create this slider
http://jqueryui.com/demos/slider/#rangemax
Is it possible to parametrize the max value?
For ex:
$("#slider-range-max").slider({
range: "max",
min: 1,
max: maxValue,
value: 2,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
Is it possible to pass maxValue value, when I click on something? After its been initialized? Not on document ready function, but even after that?
You can set the values at any time, for max you'd do this:
$("#slider-range-max").slider("option", "max", newValue);
You can see how to do this with all the options at the jQuery UI site. Here's an example:
$(".increaseMax").click(function() {
var currentMax = $("#slider-range-max").slider("option", "max");
$("#slider-range-max").slider("option", "max", currentMax + 1);
});
According to the page you gave in your question (click on Options and then max):
Get or set the max option, after init.
//getter
var max = $( ".selector" ).slider( "option", "max" );
//setter
$( ".selector" ).slider( "option", "max", 7 );
Change 7 to any value/variable you want to set the new maximum value to.