Range slider in dialog does not work

Questions
1

Hi. I’m using V2. I want to use range sliders in a popup window but it does not show up.
here is the code

  $$('.open-vertical').on('click', function () {
  myApp.dialog.create({
    title: 'Set RGB',
    content: '\
	div class="block">\
              div class="range-slider range-slider-init color-red" data-label="true">\
                input id="redSlider" type="range" min="0" max="255" step="1" value="50">\
				/div>\
				/div>',
    buttons: [
      {
        text: 'OK',
      },
      {
        text: 'Cancel',
      },
    ],
    verticalButtons: true,
	cssClass: 'appdialog'
  }).open();
});

(NOTE: It seems I can’t use html tags here so I deleted “<” so that it be visible.)

Any ideas?

2

Dialog is not a pop up.
Range slider can be auto initialized only when in it is in initialized view and inside of page. Init range slider manually on dialog open.

3

Yes that is a dialog not popup. I edited the title.
I took a look at documentation and tried fixing it but couldn’t get it work correctly.
I want three sliders in the dialog. This is the code

  $$('.open-vertical').on('click', function() {
              myApp.dialog.create({
                  title: 'Set RGB',
                  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>\
				',
                  buttons: [{
                          text: 'OK',
                      },
                      {
                          text: 'Cancel',
                      },
                  ],
                  verticalButtons: true,
                  cssClass: 'appdialog'
              }).open();


              // Init range sliders

              myApp.range.create({
                  el: '.range-slider',
                  inputEl: '#redSlider',
                  on: {
                      change: function() {
                          console.log('Range Slider value changed')
                      }
                  }
              });

              myApp.range.create({
                  el: '.range-slider',
                  inputEl: '#greenSlider',
                  on: {
                      change: function() {
                          console.log('Range Slider value changed')
                      }
                  }
              });

              myApp.range.create({
                  el: '.range-slider',
                  inputEl: '#blueSlider',
                  on: {
                      change: function() {
                          console.log('Range Slider value changed')
                      }
                  }
              });

But just the last one shows up. And it doesn’t look right, at 0 it looks like below
1

Where am I getting it wrong?

4
  1. You init same range slider multiple times as you pass same “el” parameter, use more specific selector
  2. Try to init range sliders within “open” event of dialog
5

http://framework7.io/kitchen-sink/
console:

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();
3 Likes
6

That perfectly did it! I really appreciate your help. Thank you!