Как изменить шаг в noUiSlider?

Question

Есть слайдер на noUiSlider, рендж от 3000 до 300 000. Не могу разобраться как сделать так чтобы шаг от 3000 до 5000 был равен 2000, а уже после пяти был равен 5000. И есть ли возможность в тексте маркера добавить разделитель в виде пробела и маркер валюты? 5 000$, 50 000$, 150 000$. Буду благодарен за помощь.

<div class="slider-container">

https://codepen.io/fisherspoon/pen/jOBWJQP

Answer 1

Сделал вам как вы хотели.

Ссылка на Codepen на всякий случай

$(document).ready(function() {
  let slider = document.getElementById("slider");
  let input = document.getElementById("valFromSlider");

  let slide = noUiSlider.create(slider, {
    start: 3000,
    range: {
      min: [3000, 2000],
      "10%": [5000, 5000],
      max: [300000]
    },
    pips: {
      mode: "values",
      values: [3000, 5000, 50000, 100000, 150000, 200000, 250000, 300000],
      format: wNumb({
        suffix: " ₽"
      })
    }
  });

  slide.on("slide", function(values, handle) {
    let value = parseFloat(values[handle]);
    $(input).val(value);
  });
});

body {
  font-family: "Open Sans", sans-serif;
}

.slider-container {
  max-width: 800px;
  margin: 50px 0 0 50px;
}

.noui-slider {
  margin-top: 50px;
}

.noUi-marker.noUi-marker-horizontal.noUi-marker-normal {
  display: none;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 6px !important;
  background: #ccc;
}

.noUi-pips-horizontal {
  padding-top: 20px !important;
}

.noUi-value.noUi-value-horizontal.noUi-value-large {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ccc;
}

<!-- Шрифты start -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<!-- Шрифты end -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.css">



<div class="slider-container">
  <input type="text" id="valFromSlider" value="3000">

  <div id="slider" class="noui-slider"></div>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.0/nouislider.min.js"></script>

<!-- Библиотека форматирования, для добавления символа рубля -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.2.0/wNumb.min.js"></script>

БЛОГ НА HUSL

Как изменить шаг в noUiSlider?

Ответы (1 шт):