JQuery UI slider shows wrong value when dragged to 100 (shows 0) - javascript

I've created a JQuery UI slider and using both change and slide events. Problem is when adding the slide event and dragging the slider to 100 the value shows as 0 not 100.
Fiddle here: http://jsfiddle.net/nrNX8/524/
var total;
var s = $("#slider").slider({
value: 0,
min: 0,
max: 500,
step: 100,
change: function(event, ui) {
$('#select').val(s.slider('value'));
},
slide: function(event, ui) {
$('#select').val(s.slider('value'));
},
});
$('#up').click(function() {
s.slider('value', s.slider('value') + s.slider("option", "step"));
$('#select').val(s.slider('value'));
});
$('#down').click(function() {
s.slider('value', s.slider('value') - s.slider("option", "step"));
$('#select').val(s.slider('value'));
});
$('#select').change(function() {
s.slider('value', $(this).val());
});

The problem is that when the slide event is fired, the value hasn't actually changed yet, which means that s.slider('value') is still zero when you set it.
Use the value that is passed to the slide callback rather than the value current set on the slider. In other words, you should change s.slider('value') to ui.value inside of the slide callback:
Updated Example
slide: function( event, ui ) {
$('#select').val(ui.value);
},
Reference: jQuery UI slide( event, ui )

According to the docs
Triggered on every mouse move during slide. The value provided in the
event as ui.value represents the value that the handle will have as a
result of the current movement. Canceling the event will prevent the
handle from moving and the handle will continue to have its previous
value.
value of the slider doesnt change during slide, you can access currently selected value via ui.value:
slide: function( event, ui ) {
$('#select').val(ui.value);
}
Updated fiddle

Related

Ag-grid cell renderer with slider not working

I am using Ag-grid with native JavaScript. I am trying to get a slider in a cell to work.
I have implemented the cell renderer and used the jQuery slider inside it. However, the slider is not moving. I have tried stopping the event propagation with unsuccessful results. Any help is appreciated.
Here is a working example link.
https://jsbin.com/netavepeme/1/edit?html,js,console,output
cellRenderer: function(params) {
var sUI = "<div class='slider' style='margin:5px'></div>";
// create jQuery slider
var sliderObj = $(sUI).slider({
min: 1,
max: 5,
step: 1,
value: params.data.val,
slide: function(event, ui) {
console.log("slided");
},
stop: function(event, ui) {
console.log("stopped");
}
});
return $(sliderObj).prop("outerHTML");
}
I got it working
https://jsbin.com/coyakeluci/edit?html,js,console,output
So basically what I did is simply return the html inside the cellrenderer and onGridReady event that I added I initialized the plugin. I also removed your events that you added that prevent it to slide as well.
cellRenderer: function(params) {
return "<div class='slider' style='margin:5px'></div>";
}
onGridReady: function(event) {
$(".slider").slider({
min: 1,
max: 5,
step: 1,
slide: function(event, ui) {
console.log("slided");
},
stop: function(event, ui) {
console.log("stopped");
}
});
},
Actually, the existing answer not fully correct
First of all, you've mixed cellRenderer and cellEditor functionality.
cellRenderer - used for RENDERING (for displaying cell info, not for edit)
cellEditor - used for EDITING (which means, editor component would be accessible only when edit mode would be activated)
So if you will try to get an updated cell value from cellRenderer it wouldn't be successfully achieved.
You can play with ag-grid settings to get edit mode activated via a single click or additional key-press or even combine cellRenderer with hover logic to achieve instant edit mode activation.
Btw this is how slider should be initialized in a correct way:
I believe that you already mentioned (from the links above) how you can create your own cellRenderer or cellEditor (in javascript) so, I will notice only about slider initialization.
You have to define the slider after Gui is attached:
afterGuiAttached = function() {
$(this.container).slider({
min: 1,
max: 5,
step: 1,
value:this.resultValue,
slide: (event, ui)=> {
this.resultValue = ui.value;
console.log("slided", ui.value);
},
stop: (event, ui) => {
console.log("stopped", ui.value);
this.params.stopEditing();
}
});
this.container.focus();
};
And also get&set value inside slide function.
Demo
On this example, you can find out how to create a component with enabled edit mode without single\double clicking

Slider w/ controls bind to select

I have put together a jQuery UI range slider with controls, although I am trying to bind it also to a select so that choosing a value from dropdown moves slider and moving with controls changes value in select dropdown
var gmin = 0;
var gmax = 500;
var s = $("#slider").slider({
value: 0,
min: gmin,
max: gmax,
step: 100,
slide: function(event, ui) {
$("#select option").val(ui.value);
}
});
$('#up').click(function() {
s.slider('value', s.slider('value') + s.slider("option", "step"));
});
$('#down').click(function() {
s.slider('value', s.slider('value') - s.slider("option", "step"));
});
Problems at the moment:
up-down buttons change select values to one value only
choosing a value from dropdown select does not move slider aswell.
Any tips here as I am lacking a bit of knowledge unfortunately.
FIDDLE: http://jsfiddle.net/nrNX8/517/
The issue with the select is because you need to set the val() of the select itself, no the text() of all the option elements within it.
Then you can hook to the change event of the select to update the slider with the chosen value, something like this:
$('#up').click(function() {
s.slider('value', s.slider('value') + s.slider("option", "step"));
$('#select').val(s.slider('value'));
});
$('#down').click(function() {
s.slider('value', s.slider('value') - s.slider("option", "step"));
$('#select').val(s.slider('value'));
});
$('#select').change(function() {
s.slider('value', $(this).val());
});
Updated fiddle
Add this block of code on the change event of select element.
$("#select").change(function(e){
s.slider('value', e.target.value);
});

Change variable based on value of 'jQuery UI Slider'

I'm trying to update a variable based on the value of a jQuery UI Slider, which is then used within a function but I can't get it to work. Here's what I have so far:
$(document).ready(function() {
$('.drag').draggable();
$("#hue").slider({
min: -180,
max: 180,
value: 150,
slide: function(event, ui) {
$("#slideResult").text(ui.value);
},
change: function(event, ui) {
$("#slideResultSecret").val(ui.value);
}
});
var hueValue = document.getElementById("slideResultSecret").value;
$("#slideResult").text("null!");
});
$(window).load(function() {
$('.window img').pixastic("hsl", {hue: hueValue, rect:{left:115,top:115,width:490,height:692}});
});
Does that make sense? It's hard to explain it when you don't fully understand it yourself.
It is enough to define the variable inside the change event, like so:
change: function(event, ui) {
hueResult = $("#hue").slider("value");
}

Get value while dragging the slide

How do I get the value of the slide while I drag the slide?
I tried but it did not work:
$("#slider").slider({
slide : function() {
alert($("#slider").val());
}
});
As written here, to get the value you need to use stop and not slide to get the value after interaction is stopped
$( "#slider" ).slider({
stop: function( event, ui ) {
alert($(this).val());
}
});
here is a jsfiddle

Error : cannot call methods on slider prior to initialization attempted to call method 'value'

I have written something like below. onclick of div with id "PLUS" I
am getting the following error:
cannot call methods on slider prior to initialization attempted to call method 'value'
<div id="PLUS" class="PLUS"></div>
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
});
</script>
Any help is appreciated.
If we check error in detail you will notice that it says you are trying to call the value method before the initialization of slider plugin.
Reason:
Actually JavaScript is an interpreted language, and it doesn't wait for first command to execute and finish. That's why your $(".slider").slider({ and $(".PLUS").click(function() { lines run at same time and the error occurs.
Solution:
You can put your code in setTimeout function here is an example given below.
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
setTimeout(function(){
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
},200); // 200 = 0.2 seconds = 200 miliseconds
});
</script>
I hope this will help you/someone.
Regards,
You have used $(".slider").slider() at the time of initializing and
$("#slider-result").slider() at the time of getting the value some plugins work on selector you have used at the time of init, so try that.
The error is caused because $("#slider-result") is not the element initialized as slider and you're trying to execute slider widget methods on it instead of $(".slider") which is the actual slider.
Your code should be
$(".PLUS").click(function() {
var value = $(".slider").slider("value"),
step = $(".slider").slider("option", "step");
$("#slider-result").text(value + step);
//---- maybe you'll need to ----^---- parseInt() the values here
});
i had a similar problem.
your block here
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value")
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
just keep it under
create: function( event, ui ) {}
ie.
create: function( event, ui ) {
$(".PLUS").click(function() {
var value = ui.value;
, step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
}
hope this works.
The best way I found to achieve this is to use the event from the ON function from the slider library to get the value. Ex:
slider.on('slideStop', function(ev) {
let value= ev.value; //try ev if you want to see all
console.log(value);
})
Regards

Categories

Resources