Increase space between slider and labels

[Johannes Zillmann]

Following code:

<Slider
                             min={ 0 }
                             max={ 50 }
                             value={ value }
                             step={ 5 }
                             onChange={ this.changeValue.bind(this) }
                             labels={ { 0: '0%', 5: '5%', 10: '10%', 20: '20%', 50: '50%' } }
                             format={ (value) => value + '%' } />

produces the following slider:

It can be seen live at http://jmh.morethan.io/#twoRunsExample

Now the question... How can i increase the space between slider and labels? It looks a bit off in case the slider knob is at a label...

[Stefan Feser]

Hi @jzillmann
You can easily increase the space between slider and labels by changing the top CSS property:

.rangeslider__label-list .rangeslider__label {
  position: absolute;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  top: 35px; // change this property
}

[Johannes Zillmann]

@StefanFeser Thanks, works like a charm!