5

Нужно сверстать вот такой 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]
    }        
});
2
  • есть какой-то ответ. и он похож на решение данной проблемы
    – ThunderAL
    19 ноя 2019 в 6:43
  • не совсем подходит, потому что там десятичные дроби идут через равномерный промежуток - 0,1. А у меня всяко-разно прыгают.. Комментарий ниже очень помог) 20 ноя 2019 в 4:43

1 ответ 1

2

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

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>

1
  • Помогло, спасибо большое! 20 ноя 2019 в 4:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.