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

Delay pie chart animation until in viewport

I am using this jquery plugin by LugoLabs called "Circles" in order to animate a few pie charts on a website I am building. (https://github.com/lugolabs/circles)
It works perfectly, but the pie chart animation starts on page load and I want to delay it until it is seen by the viewer.
Would it be possible to use something like viewportchecker.js (https://github.com/dirkgroenen/jQuery-viewport-checker) to only start the animation once someone is viewing it? I've used this before on other projects with success, but I'm having a hard time integrating it with the existing javascript.
----Example setup---
HTML:
<div class="circle" id="circles-1"></div>
SCRIPT:
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text'
styleWrapper: true,
styleText: true
});

As previously mentioned as comment: The circles github has an example for starting the circles animation when the circle is in view: https://github.com/lugolabs/circles/blob/master/spec/viewport.html.
I've added a Fiddle containing this example, and as there was the question how to adjust the circle from OP to work with this example I've adjusted this in another Fiddle. The only adjustment was to change the function createCircles as follows:
function createCircles() {
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text',
styleWrapper: true,
styleText: true
});
}

Can't you just calculate the scroll height like:
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() > $('#circles-1').offset().top + 810)
{
$(function() {
///your pies, 810px is your height
});
});
}
});
instead of loading a plugin...

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 sliders do not change value correctly when changing steps

http://jsfiddle.net/ntSrb/4/
Problem: The second slider should decrement in steps of 1 as the first slider changes by steps of 3
I have inspected the changes of the second slider and its as if the first time the first slider changes it works, after that the second slider just doesnt register new values
Also the second slider jumps randomly if you pull the first slider by large steps.
This is a simplified version of my problem because in reality I have 4 sliders which will affect eachother in a similar way (as one slider increments by 3, then the three other sliders decrements by 1)
HTML
<span id="firstspan">25</span>
<div id="firstrange" style="max-width: 300px;"></div>
<span id="secondspan">25</span>
<div id="secondrange" style="max-width: 300px;"></div>
JS
function updateSpans(numberChange) {
var oldval;
var newval;
oldval = $("#secondrange").slider("value"); //number
newval = Math.round(oldval + numberChange / 3);
$('#secondrange').slider("option", "step", 1);
$("#secondrange").slider("option", "value", newval);
$('#secondrange').slider("option", "step", 3);
$("#secondspan").text(newval);
}
$(function () {
$("#firstrange").slider({
orientation: "horizontal",
min: 0,
max: 100,
value: 25,
step: 3,
slide: function (event, ui) {
var currentvalue = ui.value; //number
var oldvalue = parseInt($('#firstspan').text()); //number
$("#firstspan").text(currentvalue);
updateSpans(oldvalue - currentvalue);
},
});
});
$(function () {
$("#secondrange").slider({
orientation: "horizontal",
min: 0,
max: 100,
value: 25,
step: 3,
});
});

Please see this jsFiddle Link. I have change your jsfiddle code and now it works. Please check. Change in line 22:
change: function(event, ui){