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...
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 stuck.. I want to create multiple range sliders with noUiSlider. Each slider has to handle between to values (min=2600000, max=8500000,). I format the number using a wNumb, but formatting only works on the second tooltip (1st is ignoring).
See my current code here:
HTML
<div id="steps-slider"></div>
JS
var stepsSlider = document.getElementById('steps-slider');
var input0 = document.getElementById('input-with-keypress-0');
var input1 = document.getElementById('input-with-keypress-1');
var inputs = [input0, input1];
var moneyFormat = wNumb({
decimals: 0,
thousand: ' ',
});
noUiSlider.create(stepsSlider, {
start: [2650000, 8500000],
connect: true,
tooltips: [true, moneyFormat],
range: {
'min': 2650000,
'max': 8500000
});
Now
What i want
You are passing true for the first tooltip, instead of a formatter. That'll provide a tooltip with the default slider formatting. To use your formatter for both tooltips, use tooltips: [moneyFormat, moneyFormat].
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
Hello I am using jQuery jRange slider to show time of video on my page. when I am changing my video url at that new time is not appending to slider.
It shows min and max value of previous video.
Here is link of api : http://nitinhayaran.github.io/jRange/demo/
Please help me out.
$("#video_url").change(function() {
player.pause();
var currtime = player.currentTime();
var dirtime = player.duration();
addSlider(currtime, dirtime);
jQuery(".annodds").change(function() {
$(".annodds").val(this.value);
});
});
function addSlider(currtime, dirtime) {
jQuery('.annodds').jRange({
from: Math.round(currtime),
to: dirtime,
step: 1,
// scale: [10,20,30,40,50,60,70,80,90,100],
format: '%s',
width: 300,
scale: false,
showLabels: true,
theme: "theme-blue",
isRange: true,
onstatechange: function() {
$(".annodds").trigger('change');
}
});
}
As mentioned here. You can simply use the setValue to set the desired value for your range selector
$('.annodds').jRange('setValue', 0);
You can use the code below to change the slider values :
$('.annodds').jRange('setValue', 20);
I need to add a jquery ui slider to each cell of slickgrid. Number of records is over 10,000 with over 150 columns. The problem is that the initial set of sliders are rendered fine but as I scroll (left or right), they disappear. Somehow, the grid is not getting invalidated for those cells. I am using the following formatter on the column:
SliderFormatter = function (row, cell, value, colDef, dataContext) {
var html = "<div class='mySlider' id='slider_" + dataContext['id'] + "'></div>" + value;
return html;
}
and invoking the slider from my document.ready callback.
Any help will be appreciated. Thanks in advance !
SlickGrid renders only what's visible in the viewport, plus a small buffer. As you scroll, rows/cells are dynamically added and removed.
What this means for your case, is that when you initialize the slider widget in your document.ready callback, you're only initializing a tiny portion of them, and the ones that did get initialized, don't get re-initialized when the cells they are in are removed and recreated by SlickGrid.
SlickGrid doesn't allow you to use jQuery widgets like the slider in cells and requires that formatters output pure HTML in order to make it hard to implement the grid in a way that will slow it down. (I won't get into my reasoning behind that admittedly controversial decision.)
My advice here is to avoid using the jQuery UI slider here. It is simply not scalable or performant enough. Without virtualization, what you're trying to do is impossible - initializing 100 sliders is going to be really slow; initializing 10'000 x 150 of them is out of the question. With virtualization, you'll need to initialize and destroy them on the fly as you're scrolling around, and that's just too slow to scroll smoothly.
Consider using an HTML5 range input - <INPUT type="range">. It's supported by all major browsers with the exception of IE <10. See http://caniuse.com/#feat=input-range.
I've created an example using SlickGrid's async post-render option. #Tin is probably right that it would be better to use the native <input type="range"> but just in case you need to support older browsers here's how you can do it.
function waitingFormatter(value) {
return '<div class="slider"></div>';
}
function renderSlider(cellNode, row, dataContext, colDef) {
var cell = $(cellNode);
cell.find('.slider').slider({
value: dataContext.value,
slide: function(e, ui) {
data[row].value = ui.value;
cell.prev().html(ui.value);
}
});
}
var grid;
var data = [];
var columns = [
{ id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title" },
{ id: "value", name: "Value", field: "value", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator },
{ id: "chart", name: "Slider", sortable: false, width: 425, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSlider }
];
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableAsyncPostRender: true
};
$(function () {
for (var i = 0; i < 500; i++) {
var d = (data[i] = {});
d["title"] = "Record " + i;
d["value"] = Math.round(Math.random() * 100);
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})