Develop Reference

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

Jquery sortable - limit droppables

I will simplify my explanation so you get what I am doing. I have two div's and I set up portlets as shown here, however I am dynamically injecting my portlets, no big problem there.
<div id="mainallapplicant" class="myrow"></div>
<div id="contingent_right" class="myrow"></div>
Here is the JavaScript
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
beforeStop: function( event, ui ) {}
});
I am trying to allow a maximum of only one droppable into mainallapplicant. If there is one already there, I will show a confirmation dialog and depending on the answer, I cancel the drop or move out the existing item and replace it with the new item. I tried the following but I am getting nowhere.
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
start: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.sender.draggable("cancel");
}
},
stop: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.item.remove();
// Show an error...
}
}
});

You can use start to get the current count of portlet elements, then use stop to do the checking
Also notice I added class names to each div to allow only one div to have a maximum of 1 portlet
$(document).ready(function () {
$.count = 0;
$(".myrow").sortable({
connectWith: ".myrow",
revert: true,
start: function () {
$.count = $(".myrow").has(".portlet").length;
console.log("Start " + $.count);
},
stop: function (event, ui) {
if ($(ui.item).parent(".myrow").hasClass("left")) {
if ($.count == 2) {
$(".myrow").sortable("cancel");
}
}
}
});
});
DEMO: http://jsfiddle.net/Ue4dq/

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

How to get value from input with dynamically changed value by jquery UI slider?

I've input text with a dynamically changed value by jquery UI slider. How to get value from $("#scope_input") by jquery? .change event working only from manual keypress on keyboard, on sliding doesn't getting any value:
$("#scope_input").change(function() {
console.log($(this).val());
});
$("#scope_slider").slider({
range: "min",
min: 1,
max: 100,
value: 10,
slide: function(event, ui) {
$("#scope_input").val(ui.value);
}
});

You need to trigger the change event manually:
$("#scope_input").val(ui.value).change();

WHen you update the field within the slide event, trigger the change on the input
$("#scope_slider").slider({
range: "min",
min: 1,
max: 100,
value: 10,
slide: function(event, ui) {
$("#scope_input").val(ui.value).change();
}
});

Did you try
$("#scope_slider").bind("slidechange", function(event, ui) {
$("#scope_input").val(ui.value);
});

jQuery-ui slider - How to stop two sliders from controlling each other

This is in reference to the question previously asked
The problem here is, each slider controls the other. It results in feedback.
How do I possibly stop it?
$(function() {
$("#slider").slider({ slide: moveSlider2 });
$("#slider1").slider({ slide: moveSlider1 });
function moveSlider2( e, ui )
{
$('#slider1').slider( 'moveTo', Math.round(ui.value) );
}
function moveSlider1( e, ui )
{
$('#slider').slider( 'moveTo', Math.round(ui.value) );
}
});

This is sort of a hack, but works:
$(function () {
var slider = $("#slider");
var slider1 = $("#slider1");
var sliderHandle = $("#slider").find('.ui-slider-handle');
var slider1Handle = $("#slider1").find('.ui-slider-handle');
slider.slider({ slide: moveSlider1 });
slider1.slider({ slide: moveSlider });
function moveSlider( e, ui ) {
sliderHandle.css('left', slider1Handle.css('left'));
}
function moveSlider1( e, ui ) {
slider1Handle.css('left', sliderHandle.css('left'));
}
});
Basically, you avoid the feedback by manipulating the css directly, not firing the slide event.

You could store a var CurrentSlider = 'slider';
on mousedown on either of the sliders, you set the CurrentSlider value to that slider,
and in your moveSlider(...) method you check whether this is the CurrentSlider, if not, you don't propagate the sliding (avoiding the feedback)

You could just give an optional parameter to your moveSlider1 and moveSlider2 functions that, when set to a true value, suppresses the recursion.

A simpler approach which is kind of a hybrid of the above answers:
var s1 = true;
var s2 = true;
$('#slider').slider({
handle: '.slider_handle',
min: -100,
max: 100,
start: function(e, ui) {
},
stop: function(e, ui) {
},
slide: function(e, ui) {
if(s1)
{
s2 = false;
$('#slider1').slider("moveTo", ui.value);
s2 = true;
}
}
});
$("#slider1").slider({
min: -100,
max: 100,
start: function(e, ui) {
},
stop: function(e, ui) {
},
slide: function(e, ui) {
if(s2)
{
s1 = false;
$('#slider').slider("moveTo", ui.value);
s1 = true;
}
}
});
});

Tried this now and all answers do not work possibly due to changes to jquery ui.
The solution of Badri works if you replace
$('#slider').slider("moveTo", ui.value);
with
$('#slider').slider("option", "value", ui.value);