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!
Related
I would like to display a slider with values from 0kg to 1kg, with pips every 100g, and the label should display 'g' and 'kg' respectively:
0 100g 200g 300g 400g 500g 600g 700g 800g 900g 1kg
How do I format the label depending on the value?
I want the slider to take 30g value for example, and have the thumb appear in the correct position. In the same time, if user drags the thumb, it should snap at 100g.
noUiSlider has a step property. Initialize like this:
noUiSlider.create(container, {
range: {
'min': 0,
'max': 1000,
},
step: 100,
//.... your other items
}
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...
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);
}
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
I am using jquery slider as vertical orientation bt vertical slider handle not moving.Please help, i know i am missing something obvious.
--Demo here--
$( ".slider" ).slider({
animate: true,
orientation:"vertical",
range: "min",
value: 50,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$("#slider-result").html( ui.value );
}
});
DEMO
I've simply removed top: -3px;
from .ui-slider-handle
If you want to set the start position of a slider to the top, use value parameter in your slider function (value = 100).
Just Remove top:-3px; in .ui-slider-handle.