Develop Reference

How to highlight the selected region in jquery slider?

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

Jquery slider UI issue

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

jquery ui slider value undefined

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

How to multiply jQuery slider value by a defined variable?

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.

Parameterizing max value of a jQuery ui slider

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.