$.noUiSlider vertical slider with max value at top and min value at bottom

Question

$.noUiSlider slider is not working properly while making it vertical and trying to get max value at top and min at bottom using direction option. here is the code below

noUiSlider.create(document.getElementById('slider-range'), {
  start: [20, 50],
  direction: 'rtl',
  orientation: 'vertical',
  tooltips: [true,true],
  range: {
    'min': [ 10 ],
    'max': [ 90 ]
  }});

This is the output i'm getting

Answer 1

You should try without [ and ] that surrounds your min and max values :

   noUiSlider.create(document.getElementById('slider-range'), {
      start: [20, 50],
      direction: 'rtl',
      orientation: 'vertical',
      tooltips: [true,true],
      range: {
        'min': 10,
        'max': 90
      }})

Demonstration here : https://codepen.io/andreds/pen/BJdYqx

More details and documentation here : https://refreshless.com/nouislider/