Задать вопрос
@andrew-corput

Как исправить проблему с выводом значения?

Используется слайдер диапазонов noUiSlider refreshless.com/nouislider и скрипт форматирования чисел wNumb.js https://github.com/leongersen/wnumb/archive/1.0.2.zip Проблема именно с ним, а точнее с его настройкой. В примере (https://refreshless.com/nouislider/slider-read-write/) слайдер только с одним параметром a268ce96f8394fb6a9e8229b2fd19abb.png
А у меня с двумя, и выдает он вот такой фокус с первым параметром, в то время как второй работает как надо c2f69df4d02f4e02a3e590b4ac395db0.png
Код:
<input type="text" id="price_from-min" class="sqreee" data-id="price_from" data-name="min" data-type="from" placeholder="От">

<input type="text" id="price_from-max" class="sqreee" data-id="price_from" data-name="max" data-type="from" placeholder="До">

<script>
                                    var inputNumber1 = document.getElementById('price_from-min');

                                    html5Slider.noUiSlider.on('update', function( values, handle ) {

                                        var value = values[handle];

                                        if ( handle ) {
                                            inputNumber1.value = value;
                                        } else {
                                            inputNumber.value = Math.round(value);
                                        }
                                    });

                                    inputNumber.addEventListener('change', function(){
                                        html5Slider.noUiSlider.set([this.value, null]);
                                    });

                                    inputNumber1.addEventListener('change', function(){
                                        html5Slider.noUiSlider.set([null, this.value]);
                                    });
                                </script>

                                <script>
                                    var html5Slider = document.getElementById('html5');

                                    noUiSlider.create(html5Slider, {
                                        start: [ 0, 10000000 ],
                                        step: 1000,
                                        connect: true,
                                        range: {
                                            'min': 0,
                                            'max': 10000000
                                        },
                                        format: wNumb({
                                            decimals: 0,
                                            thousand: ' ',
                                            postfix: ' (₽)',
                                        })
                                    });
                                </script>

                                <script>
                                    var html5Slider = document.getElementById('html5');

                                    noUiSlider.create(html5Slider, {
                                        start: [ 0, 10 ],
                                        step: 1000,
                                        connect: true,
                                        range: {
                                            'min': 0,
                                            'max': 10
                                        },
                                        format: {
                                          to: function ( value ) {
                                            return value + ',-';
                                          },
                                          from: function ( value ) {
                                            return value.replace(',-', '');
                                          }
                                        }
                                    });
                                </script>

                                <script>
                                    var inputNumber = document.getElementById('price_from-max');

                                    html5Slider.noUiSlider.on('update', function( values, handle ) {

                                        var value = values[handle];

                                        if ( handle ) {
                                            inputNumber.value = value;
                                        } else {
                                            inputNumber1.value = Math.round(value);
                                        }
                                    });

                                    inputNumber1.addEventListener('change', function(){
                                        html5Slider.noUiSlider.set([this.value, null]);
                                    });

                                    inputNumber.addEventListener('change', function(){
                                        html5Slider.noUiSlider.set([null, this.value]);
                                    });
                                </script>
  • Вопрос задан
  • 913 просмотров
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы