We Keep Coding

noUiSlider -> use value as form input

I'm using the noUiSlider and I'm trying to use the slider value as a form input value (to send it in a working form).
I've tried various examples that I could find on stack overflow, but nothing seems to work.
This is my slider script:
<script>
var slider = $('#slider');
noUiSlider.create(slider[0], {
start: [2000],
range: { min: 2000, max: 10000 },
step: 500,
tooltips: true,
connect: [true, false],
});
</script>
Maybe there's a hint in there why the codes I find aren't working. Because to initiate the slider I somewhere found the code var slider = $('#slider'); to work for me and not var slider = document.getElementById('slider'); as shown in most examples and documentation.
I would appreciate a very simple solution/explanation, as I actually don't know javascript at all...

noUIslider does not create an html input so I can see 2 easy options.
1- Add a hidden input in your form that will contain the slider value and will be updated each time slider change event is triggered.
<form>
<div id="slider"></div>
<input id="sliderValueInput" type="hidden" value="">
</form>
<script>
var slider = noUiSlider.create($("#slider")[0], {
start: [2000],
range: { min: 2000, max: 10000 },
step: 500,
tooltips: true,
connect: [true, false],
});
//define initial hidden input value with slider value
$("#sliderValueInput").val(slider.get());
//update hidden input value on slider change
slider.on("change", function() {
$("#sliderValueInput").val(slider.get());
});
</script>
https://codepen.io/anon/pen/mxXYBK
2- Handle your form post data manually at submit with an AJAX request for instance. Demo can be provided if needed...

Google Analytics Event Tracking on JqueryUI Range Slider

So I have a simple JQuery UI range slider with two handles, as shown in this JSFiddle.
HTML
<p class="results-val">
<span class="min-val">0 </span>to
<span class="max-val"> 30</span> days
</p>
<div id="slider"></div>
JS
$(function(){
$( "#slider" ).slider({
range: true,
min: -60,
max: 60,
step: 5,
values: [ 0, 30 ],
slide: function(event, ui) {
$(".min-val").text(ui.values[0] + " ");
$(".max-val").text(" " + ui.values[1]);
}
});
});
In practice, this slider acts as a filter for our Dashboard application, scoping data shown regarding the user's results based on the range of day values.
Via Google Analytics, we want to track different permutations of handle positions. For clarity, when I say permutations, this is what I mean:
"0 to 30 days" is one permutation.
"-5 to 15 days" is another permutation.
"-40 to 0 days" is another permutation.
And so there are tons of permutations.
My idea for this is to have two events, one for each slider handle, with the handle's current step position as the value being passed:
Category: Filtering,
Action: Adjustment,
Label: leftHandle,
Value: stepPos
Category: Filtering,
Action: Adjustment,
Label: rightHandle,
Value: stepPos
However, there's a problem here. While this approach will indeed report an Average Value for each handle individually, we want to see both values together. As stated above, it's important for us to know the most popular "permutations", with a single permutation consisting of both a left handle position value and a right handle position value.
If anyone has suggestions on how to set this logic, that would be wonderful. Thank you.

You can stuff both values into a comma separated string
You can debounce the slider event to only record values that the user keeps for more than a second or two.
var globalLeft, globalRight;
$(function(){
$( "#slider" ).slider({
range: true,
min: -60,
max: 60,
step: 5,
values: [ 0, 30 ],
slide: function(event, ui) {
$(".min-val").text(ui.values[0] + " ");
$(".max-val").text(" " + ui.values[1]);
globalLeft = ui.values[0];
globalRight = ui.values[1];
$.debounce(1300, doPingGa)
}
});
});
function doPingGa() {
ga('send', 'event', 'Filtering', 'RangeAdjust', globalLeft+','+globalRight);
}

NoUiSlider does not work properly

I'm trying to set up noUiSlider.
My html is
<div id="slider" class"noUiSlider"></div>
My javascript
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: 10,
range: {
min: 0,
max: 100
},
pips: {
mode: 'values',
values: [20, 80],
density: 4
}
});
The javascript is exactly the code from the website (examples page, last example).
That's how my slider looks like:
Both javascript and css files are correctly implemented.
Any ideas why it's not working?
UPDATE: As jsfiddle didn't work, here is a CodePen example:
http://codepen.io/anon/pen/oXVoyO

This plugin doesn't styling these values. You need to apply custom CSS to the elements:
.noUi-value.noUi-value-horizontal.noUi-value-large {
position: absolute;
}
With this rule, you have the 20% and 80% values in bottom of their position in slider. If you want to stylize much more, you need to apply custom CSS to this elements, or attach elements to update() function of the plugin:
slider.noUiSlider.on('update', function( values, handle ) {
//on slide you can update values and items.
});
See it working:
http://codepen.io/anon/pen/gpEXQP

jQuery ui spinner percentage calculation

I have one jquery ui spinner input where it shows values from 0% to 100% with increment of 10.
which is fine. I am trying to add some additional function.
Here is what I am wanting: In my spinner field my value can be anything from 0% to 100% and if
I start increasing or decreasing value it should display How much is remaining from the 100%.
Like if I make my value 40% in spinner than in the text beside the input field should display 60% remaining. Is this possible to make ? Thanks in advance and sorry for my bad English.
JS FIDDLE EXAMPLE
js
$("#spinner").spinner({
min: 0,
max: 100,
step: 10
});
HTML
<input id="spinner" value="0"/>
<p class="right totalResult">100% Remaining</p>

Sure, one easy way would be to wrap the 100 in a span and use this jQuery:
$("#spinner").spinner({
min: 0,
max: 100,
step: 10,
spin: function (e, ui) {
$('p.right.totalResult span').text(100-ui.value)
}
});
jsFiddle example

Try this code
$("#spinner").spinner({
min: 0,
max: 100,
step: 10,
spin: function( event, ui ) {
var remain = 100 - ui.value;
$(".totalResult").html(remain + "% Remaining");
}
});
DEMO

You need to add an event listener for the spin(when it goes up or down).
You can do it like below:
$("#spinner").spinner({
min: 0,
max: 100,
step: 10
}).on("spin",function(event, ui){
$(".right").text((100 - ui.value) + "% Remaining")
});
I hope this helps!

Overriding units on a jQuery Knob does not redraw correctly on page reload

I have a readonly jQuery Knob. I have been able to add units to the numeric display (as per How to display units with Jquery Knob ), but the foreground (ie. graphical value indicator) of the dial is no longer displayed when the page is reloaded.
Here's my HTML:
<input class="knob" id="workload" data-angleoffset=-125 data-anglearc=250 value="{{ workload }}" >
( {{ workload }} is a floating point Django template value - it is being substituted correctly )
Inside my jQuery ready function, I have:
if (jQuery().knob && ! App.isIE8()) {
// Workload Indicator
$(".knob").knob({
'dynamicDraw': true,
'min': 0, 'max':100,
'thickness': 0.2,
'tickColorizeValues': true,
'readOnly': true,
'skin': 'tron',
'fgColor': '#F00',
'inputColor':'#3D3D3D',
'bgColor': '#3D3D3D',
'width' : 150,
'draw' : function () {
$(this.i).val( parseInt(this.cv) + '%');
}
});
}
fgColor was originally set from the template value, but the above code with a hard-coded fgColor produces the same result.
Commenting out the draw callback works as expected: The knob is drawn complete with a numeric value in the middle and a red colored indicator on the outside arc.
Uncommenting the draw fixes the numeric formatting (no decimal points + a percentage sign). The numeric formatting remains correct for initial display and on re-load.
However the red arc only appears on the initial display - it disappears when the page is re-loaded!
So what is going on? Is draw over-riding jquery-knob's own canvas draw method? If so, how can I call the graphical draw part?

I was able to use this:
$('.knob').val(0).trigger('change').trigger('draw');

Here is the solution, sent to me by Sally Maughan (not of this parish):
$(".knob").each( function () {
this.value = Math.round( this.getAttribute('value') );
}).knob({
'dynamicDraw': true,
'min': 0, 'max':100,
'thickness': 0.2,
'tickColorizeValues': true,
'readOnly': true,
'skin': 'tron',
'fgColor': wcol,
'inputColor':'#3D3D3D',
'bgColor': '#3D3D3D',
'width' : 150,
'draw' : function () {
this.i.val( this.cv + '%');
}
});
The above version uses a new value from the HTML with each reload.
If you want to keep the same value through the reload, then Sally suggests replacing the this.value assignment with:
this.value = Math.round( this.value.replace('%','') );