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.
Related
I am using two jquery sliders, one with single and another multi handle. It's working okay but I need to show the selected range in a different colour and am unable to find the same in the documentation.
This is how my script looks like:
$(function() {
$( "#slider-1" ).slider({
slide: function(event, ui) {
$(this).css({
'background': 'rgb(107, 183, 185)'
});
}
});
});
This script does give the background color but to the full slider which is not what I want. I need to change the color for only the selected range.
This is how it looks with the current script:
This is what I am looking for:
And for the double handle range selector, this is the script from jquery UI that I am using:
$(function() {
$( "#slider-3" ).slider({
range:true,
min: 0,
max: 500,
values: [ 35, 200 ],
slide: function( event, ui ) {
$( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
" - $" + $( "#slider-3" ).slider( "values", 1 ) );
});
This one gives me the result as follows:
(I am unable to change the color here)
You have to do that manually, using some custom CSS.
Here is working snippet :
$(function() {
$("#slider-1").slider({
slide: changeRange
}).append('<div class="highlight"></div>');
});
$('#slider-1').click(changeRange);
function changeRange() {
let range = $(this).find('span').css("left");
$(this).find('.highlight').width(range);
}
.highlight {
background: teal;
height: 100%;
width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider-1">
</div>
For double range slider, you just have to modify an element with CSS. Just add this to your css :
#slider-3 .ui-widget-header {
background: teal;
}
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
Probably most stupid question ever, but it is really annoying, the code compiles well and work great with range numbers 0 to 100, however, I cannot figure out why my slider control stop working when I use numbers greater than 100 ... I'm using simple jquery-ui sample
and all looks good, but soon as change numbers greater then 100 (due to our requirements we want to use it for years), the select list stop changing the dates and slider doesn't move ... Does it support numbers greater then 100 or there is some limitations ?! js code I'm using:
$(function() {
var select = $( "#minbeds" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 100,
max: 1000,
step: 100,
range: "min",
create: function( event, ui ) {
setSliderTicks(event.target);
},
value: select[ 0 ].selectedIndex + 1,
slide: function( event, ui ) {
select[ 0 ].selectedIndex = ui.value - 1;
}
});
$( "#minbeds" ).change(function() {
slider.slider( "value", this.selectedIndex + 1 );
});
});
function setSliderTicks(el) {
var $slider = $(el);
var max = $slider.slider("option", "max");
var min = $slider.slider("option", "min");
var spacing = 100 / (max - min);
$slider.find('.ui-slider-tick-mark').remove();
for (var i = 0; i < max-min ; i++) {
$('<span class="ui-slider-tick-mark"></span>').css('left', (spacing * i) + '%').appendTo($slider);
}
}
and here is HTML:
<form id="reservation">
<select name="minbeds" id="minbeds">
<option>100</option>
<option>200</option>
<option>300</option>
<option>400</option>
<option>500</option>
<option>600</option>
<option>700</option>
<option>800</option>
<option>900</option>
<option>1000</option>
</select>
</form>
And some CSS styles for tick-marks:
.ui-slider-tick-mark{
display:inline-block;
width:2px;
background:grey;
height:16px;
position:absolute;
top:-1px;
}
Can anyone please let me know, what is wrong with it, and in case if there are some limitations, can anyone recommend me some other library to use (open source), with the same functionality, taking input from html (select list) and with tick-marks/labels available ?! Any help appreciated ! Thank you.
The problem is that you simply copy pasted the example and expect it to work without understanding how it works even though you have a different requirement.
The demo is using selectedIndex property directly because the values are ranging from 1-6 and the slider steps by one. Your values and steps are different so if you want to find the option to select by index, you should divide the slider value by step value which is 100 and subtract 1 (since the options index is 0 based). Similarly if you want to set the slider value based on selected option index, you should increment it by 1 and multiply by 100.
Instead of doing all that you can simply use the selected options value and slider value directly like:
$(function() {
var select = $("#minbeds");
var slider = $("<div id='slider'></div>").insertAfter(select).slider({
min: 100,
max: 1000,
step: 100,
range: "min",
value: 100,
slide: function(event, ui) {
select.val(ui.value);
}
});
$("#minbeds").change(function() {
slider.slider("value", this.value);
});
});
<link href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<form id="reservation">
<select name="minbeds" id="minbeds">
<option>100</option>
<option>200</option>
<option>300</option>
<option>400</option>
<option>500</option>
<option>600</option>
<option>700</option>
<option>800</option>
<option>900</option>
<option>1000</option>
</select>
</form>
I would like a jQuery UI slider that has five differently colored ranges defined by three handles. (So the first range would be handle 0 - handle 1, and the second range would be handle 1 to handle 2.) Is this possible through configuration, or must I hack it? If I have to modify the source, is there any guidelines for how to go about doing that?
Update: What I'm looking for in terms of ranges is:
| --- color 1 ----- handle1 --------- color 2 ------------- handle2 ------- color3 --------- handle3 -----color 4 ----|
(hopefully that makes sense.)
The range option defined in the jquery ui slider documentation does indeed limit the slider to only 2 handles. You need to create several elements when the slider raises the 'slide' or 'change' event and set the position of these manually, this way you can create a slider with multiple handles and multiple ranges which you can apply custom css to. See fiddle for a working example.
http://jsfiddle.net/AV3G3/3/
You probably want to use a range slider and pass in an array of 3 values to create 3 handles (according to the docs):
The slider widget will create handle
elements with the class
'ui-slider-handle' on initialization.
You can specify custom handle elements
by creating and appending the elements
and adding the 'ui-slider-handle'
class before init. It will only create
the number of handles needed to match
the length of value/values. For
example, if you specify 'values: [1,
5, 18]' and create one custom handle,
the plugin will create the other two.
If you don't insist on jQuery UI, noUiSlider can give ranges different classes and supports multiple handles - just as you ask. This example demonstrates how to color the ranges.
Modified with onclick reset,please find the complete code.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<style>
.slide {
margin-top: 20px;
margin-left: 20px;
width: 400px;
background: red;
}
.slide-back {
position:absolute;
height:100%;
}
</style>
</head>
<body>
<!-- HTML -->
<button class="button">submit</button>
<p>
<label for = "price">Price range:</label>
<input type = "text" id = "price"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id = "slider-3"></div>
</body>
<script>
var doUpdate = function(event, ui) {
$('#slider-3 .slide-back').remove();
$($('#slider-3 a').get().reverse()).each(function(i) {
var bg = '#fff';
if(i == 1) {
bg = 'red';
} else if(i == 2) {
bg = 'yellow';
} else if(i == 3) {
bg = 'green';
}
$('#slider-3').append($('<div></div>').addClass('slide-back').width($(this).offset().left - 5).css('background', bg));
});
};
$(".button").click(function(){
$('#slider-3').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 100,
values: [ 10, 30, 20],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 2 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 )
);
doUpdate();
});
$('#slider-3').slider({
slide: doUpdate,
change: doUpdate,
min: 0,
max: 100,
values: [ 10, 30, 20],
slide: function( event, ui ) {
$( "#price" ).val( ui.values[ 2 ] );
}
});
$( "#price" ).val( $( "#slider-3" ).slider( "values", 0 ) );
doUpdate();
</script>
</html>
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.