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

Three.js: Uniforms value not updating

I'm using Tween.js to animate the uniforms value of a shader upon clicking a button. Here is what I have:
Shader.uniforms.threshold.needsUpdate = true;
function fadeIn() {
new TWEEN.Tween( Shader.uniforms.threshold )
.to( { value : 0.6 }, 100 )
.start();
}
function fadeOut() {
new TWEEN.Tween( Shader.uniforms.threshold )
.to( { value : 2 }, 100 )
.start();
}
document.getElementById("FadeIn").onclick = function() {
fadeIn();
}
document.getElementById("FadeOut").onclick = function() {
fadeOut();
}
The above does not work. When I try refreshing the page, the value does change but the button click does nothing. Does anyone know the mistake in my implementation? Can Tween.js be used like this or is there a better method? Thanks.

Ok here's how I got it working. It seems changing the value of the "Shader" itself is the cause. The above works when I change the uniforms value of the individual objects. So instead of Shader.uniforms.threshold, I did this:
myObject.material.uniforms.threshold, which works.

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

edit jquery-knob counter to display fraction of second

I create time counter using Knob:
$(function($) {
$(".knob").knob({
'fgColor': '#b9e672',
'thickness': 0.3,
'width':150,
'data-min': 0,
'data-max': 30,
'readOnly': true
});
var initval = 30;
$({value: 0}).animate({value: initval},{
duration: 10000,
easing:'swing',
step: function()
{
$('.knob').val(this.value).trigger('change');
}
});
});
I want to display counter in milliseconds, like picture:
how to do this?
thanks,

You can use the step option to chose the step that you would update in your knob value.
There is also another useful thing you can do, that is set the draw function. The draw function determines what gets drawn in the label. By default, it matches the value, but you don't have to.
For instance, if you want to update the knob in milliseconds, but want to round the value to display only the full seconds in the label, you could do something like:
draw: function () { $(this.i).val(Math.round(this.cv)); }
where, accordingly to the comments on the jQuery-knob source, this.cv is the "change value ; not commited value", and this.i the "mixed HTMLInputElement or array of HTMLInputElement"

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.