input type range, noUiSlider не делает десятичные числа

204

15 ноября 2021, 01:50

Нужно сверстать вот такой input range, использую noUiSlider.

У меня получилось сделать обычную шкалу от 1 до 10, например, а вот такие десятичные значения, да еще и с неравным интервалом никак не получается.. В документации ничего похожего не нашла. Очень нужно сделать, может кто что посоветует? Другой плагин?

Пробовала вручную стилизовать, тоже как-то не очень. В хроме еще отображается шкала, в мозилле нет.

Вот код для обычной шкалы

noUiSlider.create(range, {
        tooltips: true,
        connect: [true, false],
        range: {
            'min': 1,
            'max': 10
        },
        start: [1],
        step: 1,
        pips: {
            mode: 'count',
            values: 10
        },
        format: {
            to: function (value) {
                return parseInt(value);
            },
            from: function (value) {
                return parseInt(value);
            }
        }
    });

Для десятичной пробовала вот так, но не сработало:

noUiSlider.create(driver, {
    tooltips: true,
    connect: [true, false],
    // step: 10,
    range: 
        {
        'min': 2.45,
        '7%': 2.3,
        '14%': 1.55,
        '21%': 1.4,
        '28%': 1.0,
        '34%': 0.95,
        '42%': 0.9,
        '49%': 0.85,
        '56%': 0.8,
        '63%': 0.75,
        '70%': 0.7,
        '77%': 0.65,
        '84%': 0.6,
        '91%': 0.55,
        'max': 0.5
    },
    format: {
      to: function (value) {
          return parseInt(value);
      },
      from: function (value) {
          return parseInt(value);
      }
    },
    start: 0,
    pips: {
        mode: 'positions',
        values: [0, 7, 14, 21, 28, 34, 42, 49, 56, 63, 70, 77, 84, 91, 100]
    }        
});

Answer 1

Можно попробовать вот такой вариант.

var valuesRange = [ 
  2.45, 
  2.3, 
  1.55, 
  1.4, 
  1.0, 
  0.95, 
  0.9, 
  0.85, 
  0.8, 
  0.75, 
  0.7, 
  0.65, 
  0.6, 
  0.55, 
  0.5 
]; 
var snapSlider = document.getElementById('slider-snap'); 
noUiSlider.create(snapSlider, { 
  start: [3], 
  connect: true, 
  step: 1, 
  pips: { 
    mode: 'steps', 
    filter: () => 1, 
    density: 5, 
    format: { 
      to: (val) => { 
        return valuesRange[val]; 
      } 
    } 
  }, 
  range: { 
    'min': 0, 
    'max': valuesRange.length - 1 
  } 
}); 
 
var snapValues = [ 
  document.getElementById('slider-snap-value-lower') 
]; 
 
snapSlider.noUiSlider.on('update', function(values, handle) { 
  snapValues[handle].innerHTML = valuesRange[+values[handle]]; 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.0.2/nouislider.css" /> 
<div id="slider-snap"></div> 
<br/> 
<br/> 
<br/> 
<div id="slider-snap-value-lower"></div>