[V2] Range slider in modal not working

Questions
1

Range slider in popup won’t display when using router method to display (did not try any other method such as page container). It does not appear to be generating the range-bar and range-knob-wrap class containers.

I tried both ‘content’ and ‘component-url’ methods for the router.

Thx.
Paul

2

If you use range-slider-init class then it must be in initialized page/view. In this case make sure you have the following popup structure .popup > .view.view-init > .page > .... Otherwise call app.range.create(rangeElement) method on this range element to initialise it

3

I have the same issue. I can’t use range sliders in popups or modals. this is my popup html

<div class="popup animSett-popup ">
   <div class="view view-init">
      <div class="page">
         <div class="navbar">
            <div class="navbar-inner">
               <div class="title right">Animation Sett.</div>
               <div class="left"><a href="#" class="link popup-close koodak-font"><i class="icon material-icons">keyboard_backspace</i></a></div>
            </div>
         </div>
         <div class="page-content">
            <div class="block-title ">Duration:<span id="animationDurationSpan"></span></div>
            <div class="list simple-list">
               <ul>
                  <li>
                     <div class="item-cell width-auto flex-shrink-0">
                        <i class="icon material-icons">schedule</i>
                     </div>
                     <div class="item-cell flex-shrink-3">
                        <div class="range-slider range-slider-init color-indigo" id="durationSlider" data-label="true">                        
                           <input  type="range" min="3" max="120" step="1" value="20">
                        </div>
                     </div>
                  </li>
               </ul>
            </div>
            <div class="block-title">Speed:<span id="FPSSpan"></span></div>
            <div class="list simple-list">
               <ul>
                  <li>
                     <div class="item-cell width-auto flex-shrink-0">
                        <i class="icon material-icons">timer</i>
                     </div>
                     <div class="item-cell flex-shrink-3">
                        <div class="range-slider range-slider-init color-indigo" data-label="true">                        
                           <input id="FPSSlider" type="range" min="10" max="120" step="1" value="60">
                        </div>
                     </div>
                  </li>
               </ul>
            </div>
            <div class="block-title">FPS:<span id="hueChangeSpeedSpan"></span></div>
            <div class="list simple-list">
               <ul>
                  <li>
                     <div class="item-cell width-auto flex-shrink-0">
                        <i class="icon material-icons">av_timer</i>
                     </div>
                     <div class="item-cell flex-shrink-3">
                        <div class="range-slider range-slider-init color-indigo"  data-label="true">
                           <input id="hueChangeSlider" type="range" min="0" max="100" step="1" value="20">
                        </div>
                     </div>
                  </li>
               </ul>
            </div>
            <button class="col button  button-raised color-indigo  button-fill button-round center" style="width:50%; margin:auto">Save</button>
         </div>
      </div>
   </div>
</div>

I use range-slider-init class and have this popup structure .popup > .view.view-init > .page >... but this is how it shows up

popup

Do I have to initialize it with JS? If yes what is rangeElement in app.range.create(rangeElement) ?

Thanks in advance.

4

http://framework7.io/docs/range-slider.html#range-slider-app-methods

el in parameters is the HTML element of range slider (<div class="range-slider">)

1 Like
5

Thank you. I finally got it.