[SOLVED] How to properly select a range slider?

Questions
1

I’m having difficulty working with sliders. I can’t properly address a range slider. I have created 3 sliders. Now I want to get and set their value. But I can’t seem to get the right selector. this is the code that generates the 3 sliders (as suggested by “plpl”):

var $$=Dom7;
app.dialog.create({
  title: 'Set RGB',
  verticalButtons: true,
  buttons:[{text:'OK'},{text:'Cancel'}],
  on:{
    open:function(d){
      var els=d.$el.find('.range-slider');
      for(var i=0;i<els.length;i++){
        app.range.create({
          el: els[i],
          on:{
            change:function(r){
              console.log(r.getValue());
            }
          }
        });
      }      
    }
  },
  content:'<div class="block">\
             <div class="range-slider color-red" data-label="true">\
               <input id="redSlider" type="range" min="0" max="255" step="1" value="50">\
             </div>\
           </div>\
           <div class="block">\
             <div class="range-slider color-green" data-label="true">\
               <input id="greenSlider" type="range" min="0" max="255" step="1" value="50">\
             </div>\
           </div>\
           <div class="block">\
             <div class="range-slider color-blue" data-label="true">\
               <input id="blueSlider" type="range" min="0" max="255" step="1" value="50">\
             </div>\
           </div>'
}).open();

now how do I select for example the red slider?
This how I could do it: define a global variable at the top of JS var rangeSlider=[]; and then

  for(var i=0;i<els.length;i++){
    rangeSlider[i] = app.range.create({
      el: els[i],
      on:{
        change:function(r){
          console.log(r.getValue());
        }
      }
    });
  }

this way I can use rangeSlider[1].setValue(200); and it works. But I think I’m getting it the hard and inefficent way.

2

This is the correct way, if you know that the sliders are initialized and in DOM, you can use common range app methods:

app.range.setValue('.range-slider.color-green', 200);
app.range.setValue('.range-slider.color-blue', 100);

You can also add IDs to them to make selector more compact:

<div id="red-range" class="range-slider color-green" data-label="true">...

And then just

app.range.setValue('#red-range', 100);
...
1 Like
3

Thank you for your reply. None of these methods work. I tried a lot but it seems like they do not work with dynamically created range sliders. They are fine with range sliders initialized in HTML.
This what I do: the sliders are created in the click event of a button after creation of the sliders (inside a dialog) I use these methods but they not work

$$('.open-vertical').on('click', function () {
{
      // CREATE SLIDERS IN A DIALOG
}
myApp.range.setValue('.range-slider.color-red',0);  //No luck
});
4

works for me (all of these)
post your code

1 Like
5

Yes It all works. I tried the original code I posted here. The reason it was not working was because I was getting the content of the dialog from a hidden div inside my HTML like this (to keep HTML separate from JS):

<div id="rgbSliderPickerPopUp" style="display:hidden">
   <div class="block">
     <div class="range-slider color-red" id="red-range" data-label="true">
       <input id="redSlider" type="range" min="0" max="255" step="1" value="0">
     </div>
   </div>
   <div class="block">
     <div class="range-slider color-green" id="slider-green" data-label="true">
       <input id="greenSlider" type="range" min="0" max="255" step="1" value="0">
     </div>
   </div>
   <div class="block" >
     <div class="range-slider color-blue" id="slider-blue" data-label="true">
       <input id="blueSlider"  type="range" min="0" max="255" step="1" value="0">
     </div>
   </div>
</div>

then for dialog:

content: document.getElementById('rgbSliderPickerPopUp').innerHTML

I had no clue this was the reason for not working, I didn’t know it makes a difference!
Thank you for your inputs. :+1: