Range slider redesign

1

I changed how range slider, but i had a small problem, https://jsfiddle.net/khdfrt9x/1/, as you can see drag the slider the range-knob-wrap is not moving until reach 02:12, the same happen at the end of the range slider.
What i want is the green box to start moving as soon as i start dragging the slider, i don’t know how to explain it, but i hope you understand what i’m talking about from the jsfiddle i made.

2

Just use formatLabel (http://framework7.io/docs/range-slider.html) range parameter to do this. With things you are doing you break HTML layout, and tweak the CSS.

3

I don’t know how formatLabel works, i tried this

...
min: 0,
 max: 2000,
formatLabel: formatTime(value),
...

but it didn’t work

4

looks like you want the label-knob always visible (do you?)
so i made some css changes
basically => the label-knob (by core-design) is always there (but hidden)
i just made it visible permanently

i’m realy bad in css
so you will have to ask vladimir if this is correct

but at least you can see how “formatLabel” works

https://framework7.io/kitchen-sink/core/

console:

app.views.current.routes.unshift({
  path:'/some-page/',
  component:{
    template:`
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">{{title}}</div>
          </div>
        </div>
        <div class="page-content">
          <div class="block">
            <div class="range-slider"><input type="range"></div>
          </div>
        </div>
      </div>
    `,
    style:`
      .range-knob-label {
        -webkit-transform: scale(1)!important;
        transform: scale(1)!important;
        min-width: 80px!important;
      }
    `,
    data:function(){
      return {
        title:'Component Page'
      }
    },
    on:{
      pageInit:function(e,page){
        this.$app.range.create({
          el:page.$el.find('.range-slider'),
          min:0,
          max:100,
          value:50,
          label:true,
          labelText:'my label',
          formatLabel:function(v){
            return this.params.labelText+' '+v;
          }
        });
      }
    }
  }
});
app.views.current.router.navigate('/some-page/');
5

Yes i want the label-knob always visible, and the CSS you gave is working perfectly.
but the formatLabel is not working, i didn’t get my label 50, i got 50, so the formatLabel is not working https://jsfiddle.net/sfouywm5/

6

“formatLabel” starts from v3.6.3
your fiddle is v3.0.0

1 Like
7

i didn’t notice that, thanks again.

8

you should always read this file:

1 Like
9

ok i will thanks for your help