Develop Reference

NoUISlider - sticking values to their respective handlers?

I'm working on an e-commerce project that has a price range slider with two handles (min & max price filters). I decided to use NoUiSlider as it comes recommended. Although the plugin has no dependencies, I am also using jQuery 3.2.1, if it all relevant.
How can I make the values "stick" to their respective handlers? The effect I'm looking for is exactly like the slider on this webpage. I scanned through the docs but haven't been able to find anything, the closest thing I could find which I think might be related is this events page.
var handlesSlider = document.getElementById('slider-handles');
var minPrice = document.getElementById('min-price');
var maxPrice = document.getElementById('max-price');
var inputs = [minPrice, maxPrice];
noUiSlider.create(handlesSlider, {
start: [ 0, 100 ],
connect: [false, true, false],
step: 5,
range: {
'min': [ 0 ],
'max': [ 100 ]
},
format: wNumb({
decimals: 0,
thousand: '.',
prefix: '£',
}),
});
handlesSlider.noUiSlider.on('update', function( values, handle ) {
inputs[handle].innerHTML = values[handle];
});
My min-price and max-price are span elements, although I can change them if required.

I had a similar problem.
In my case, I wanted to use input boxes (instead of tooltips) to display slider values. This looks similar to your initial implementation using inputs. :)
So I solved it like this:
Create two or more input boxes in HTML (supplemented with proper ids for javascript)
<div id="exampleSlider"></div>
<div>
<input id="firstInput">
<input id="secondInput">
</div>
On Javascript:
Create a slider (I attached an example here):
var slider = document.getElementById('exampleSlider');
noUiSlider.create(slider, {
// This is an example. Customize this slider to your liking.
start: [300, 500],
range: {
'min': [0],
'max': [1000]
},
format: wNumb({
thousand: ',',
decimals: 0,
to: function (value) {
return value + ',-';
},
from: function (value) {
return Number(value.replace(',-', ''));
}
}),
});
Code for handling inputs from the slider
var firstInput = document.getElementById('firstInput');
var secondInput = document.getElementById('secondInput');
// add additional variables if you have more than two handles...
slider.noUiSlider.on('update', function (values) {
var handleValue = slider.noUiSlider.get();
firstInput.value = handleValue[0]
secondInput.value = handleValue[1]
// add additional inputs if you have more than two handles...
});
You can refer to my example code on JSfiddle

noUiSlider value undefined after changing handle direction

I create a slider, change the orientation:'vertical' and link the "span" with it so that I can update and set the values as I drag/tap the slider. It works well, but as soon as I put the Handle at the bottom with the direction: 'rtl', span outputs undefined.
I saw the same problem on the NoUiSlider site although the slider is horizontal, but the problem is still there.
Per default, the direction of the handles of the slider is set to "ltr" or "left-to-right". When the orientation of the slider is set to vertical the Handle acts the same way, they adjust either "ltr = top-to-bottom" or "rtl = bottom-to-top".
var slider = document.getElementById('sl1');
noUiSlider.create(slider, {
start: 1,
step: 1,
connect: 'lower',
direction: 'rtl',
orientation: 'vertical',
range: {
'min': 1,
'max': 32
},
format: wNumb({
decimals: 0,
})
});
var input = document.getElementById('input-with-keypress1');
slider.noUiSlider.on('update', function(values, handle) {
input.value = values[handle]; //When the slider value changes, update the input
});
slider.noUiSlider.on('set', function(values, handle) {
input.value = values[handle];
JsFiddleDemo
I don't know why, but it seems the External Resource links won't render the slider, Excuse me but I'm a noob and maybe I just got the syntax wrong (works local though)..

Multiplication with Jquery Ui Slider

I am trying to build a ui slider similar to the one on this site: http://www.solarcity.com/
I want to be able to show the monthly value and then a yearly value next to it. ( I would assume multiplying the value of the monthly by 12 of course)
Once upon a time I had my slider working properly until I tried to multiply the monthly value by 12.
What did I do wrong?
(Sorry I am totally new to JavaScript)
Here is my Jsfiddle: http://jsfiddle.net/7qDyq/1/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<span class="slider-output" id="monthly_bill">0</span>/month or <span class="slider-output" id="yearly_bill">0</span>/year
<div id="bill_slider">
</div>
$(document).ready(function(){
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (monthly_bill * 12 )
$("#monthly_bill").text(tasks_time);
$("#monthly_bill").text(tasks_done);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function() {
update();
}
});
});
Eventually after I figure this out I am also wondering how to change the color of the slider and words after the slider hits a certain point. (If then statement?) Not sure how to implement...
Any help on this is greatly appreciated. Thanks!

Most of the issues in your original jsFiddle traced back to bad JS var names; here is how you would achieve the desired effect:
function update() {
var bill_slider = $('#bill_slider').slider('value');
var yearly_bill = (bill_slider * 12)
$("#monthly_bill").text(bill_slider);
$("#yearly_bill").text(yearly_bill);
}
$("#bill_slider").slider({
value: 1,
min: 0,
max: 450,
step: 5,
slide: function () {
update();
}
});
Working jsFiddle, forked from yours: http://jsfiddle.net/6Bprf/5/
If you update your question with a description & example of the color-coding you want to do, we can include that in our answers.

jQuery slider - set min and max as same as two handles' values

Maybe I'm just not getting something simple here, but I am not able to set the min and max values as the same as the handle values in my jQuery slider. The min and max are dynamically defined via php variables, and when the slider first appears, I want it's range to be the same as the range between the min and the max, i.e. the entire slider. If the user wants to then make changes, they can do so -- it is for an ajax search filter.
When I try the below code, the range sliders get stuck all the way to the left and cannot be moved.
Here is my js:
var pay_max = $('#pay_max').html();
var pay_min = $('#pay_min').html();
$(function() {
$( "#pay_range" ).slider({
range: true,
min: pay_min,
max: pay_max,
values: [ pay_min, pay_max ],
slide: function( event, ui ) {
$( "#filter_by_pay" ).html( "Pay Range: ¥" + ui.values[ 0 ] + " - ¥" + ui.values[ 1 ] ).css("color", "black");
}
});
my html:
<div class = "hidden" id="pay_max"><?=max($all_teachers['pay']);?></div>
<div class = "hidden" id="pay_min"><?=min($all_teachers['pay']);?></div>
<div class = "filter_options" id="pay_filter">
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
<div id ="pay_range"></div>
</div>
It works okay if I, for instance, change the min to 0, but that is not the goal. I only want the range slider to be within the bounds of the initial values, which also happen to be the min and max.

You are trying to use string values where you need numbers:
Try:
var pay_max = 1*$.trim($('#pay_max').html());
var pay_min = 1*$.trim($('#pay_min').html());
used $.trim to be sure don't have any whitespace

jquery sparklines: box plots and one value

I'm using Sparklines and am trying to draw a simple blox plot with predetermined min, max, whiskers, quartiles, and one additional value -- the user's value that might fall within the quartile or outside (the whole point is to show the user where his/her value falls in the distribution)
What is the appropriate way to do this? I can get a basic box up but can't see how to lay a point on top of it. Also I can't see how to set min and max but it looks like the outliers sort of do this.
Here's my code:
<script type="text/javascript">
$(function() {
var myboxvalues = [0, 200, 450, 500, 550, 800, 1000];
$('.inlinebox').sparkline( myboxvalues, {type: 'box', raw: true });
});
</script>
</head>
<body>
<p>
My box: <span class="inlinebox"></span>
</p>
Thanks!

The flag is "target: ..."
{type: 'box', raw: true, target: 713 }