Ag-grid cell renderer with slider not working

Question

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");

  }

Answer 1

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");
      }
    });
  },

Answer 2

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