Range Slider for time

Questions
1

I am trying to make a slider for time range (dual) that is in 15 minutes steps from 9:00 - 12:00. The steps label is rendered properly but the 2. slider is not accessible and is positioned in the middle even though i has the max value set. I can only move the from slider.

<div class="addProposal-morn" style="width:46%">
              <div class="block-title display-flex justify-content-space-between">${$f7.mod.helper.lng('morning')}<span class="price-value">${mornMin} - ${mornMax}</span></div>
              <div class="list list-strong-ios list-outline-ios simple-list">
                <ul>
                  <li class="item-row">
                    <div style="width: 98%; margin: 0 16px">
                      <div class="morn-slider color-green"></div>
                    </div>
                  </li>
                </ul>
              </div>
          </div>

mornRange = $f7.range.create({
                            el: '.popover-date .morn-slider',
                            dual: true,
                            min: 480,
                            max: 720,
                            step: 15,
                            value: [480, 720],
                            scale: true,
                            scaleSteps: 4,
                            formatScaleLabel: (value) => {
                                return Math.floor(value / 60) + ':' + ('0' + (value % 60)).substr(-2)
                            },
                            label: true,
                            formatLabel: (value) => {
                                return Math.floor(value / 60) + ':' + ('0' + (value % 60)).substr(-2)
                            },
                            on: {
                                change: function (e) {
                                    const range = $f7.range.get(e);
                                    mornMin = range.value[0];
                                    mornMax = range.value[1];
                                    $update();
                                }
                            }
                        });
2

it seams like it has something to do with the html formatting. if i play around with the css display or position i can get the 2. slider to work but (green line) the bar is either to short or to long. i just cant seem to find the solution

3

so i have made the slider bigger and i can now use both sliders (from, to) but the 2. slider (to) when max value isnt displayed at the end of the bar and i cant use margin-left because then its not completely left with min value

4

i found the problem, the width has to be set in pixels for the range-slider div and list element that contains it