noUiSlider конвертирует пипсы в логарифмический вид - PullRequest
Новая
       11

noUiSlider конвертирует пипсы в логарифмический вид

0 голосов
/ 25 сентября 2018

У меня есть несколько noUiSliders , как в примере ниже.Я хотел бы изменить числовые значения пипса и слайдера на логарифмический вид.Итак, в приведенном ниже примере я бы хотел, чтобы среднее значение составляло 10 миллионов (а не 50 миллионов).Таким образом, шаги, например, от 100 000 до 250 000, меньше, чем от 23 до 30 миллионов.Примерно так:

| ---- | ---- | ---- | ---- | ---- | -------- | -------- | ------------------- | ------------- |0 7Mio 10Mio 25Mio 100Mio

Я также проверил noUiSlider-Website и другие сайты, но у меня не было подхода к тому, как это начать.Поэтому я прошу вас о помощи по этому вопросу.Заранее благодарю за чтение моего номера. 

//format the pips
function filterPips(value, type) {
  if (type === 0) {
    return value < 2000 ? -1 : 0;
  }
return value % 1000 ? 2 : 1;
}

var rangeSliderGehalt = document.getElementById('slider-range-gehalt');

noUiSlider.create(rangeSliderGehalt, {
    start: [100000],
    connect: [true, false],
    step: 100000,
    behaviour: 'tap-drag',
    tooltips: true,
    range: {
        'min': [0],
        'max': [100000000]
    },
    pips: {
        mode: 'positions',
        values: [0, 25, 50, 75, 100],
        density: 4,
        stepped: true,
        filter: filterPips,
        format: wNumb({
            decimals: 0,
            thousand: '.',
            postfix: ' €'
        })
    },
    format: wNumb({
        decimals: 0, // default is 2
        thousand: '.', // thousand delimiter
        postfix: ' €', // gets appended after the number
    })
});
var rangeSliderGehaltValueElement = document.getElementById('result-gehalt');

rangeSliderGehalt.noUiSlider.on('update', function (values, handle) {
    rangeSliderGehaltValueElement.innerHTML = values[handle];
});

var valueInput = document.getElementById('value-input'),
    valueSpan = document.getElementById('value-span');

// When the slider value changes, update the input and span
rangeSliderGehalt.noUiSlider.on('update', function (values, handle) {
    if (handle) {
        valueInput.value = values[handle];
    } else {
        //valueSpan.innerHTML = values[handle];
    }
});

// When the input changes, set the slider value
if (valueInput) {
    valueInput.addEventListener('change', function () {
        rangeSliderGehalt.noUiSlider.set([null, this.value]);
    });
}
.label{
  margin-top:50px;
}

.slider{
  padding:50px;
}
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.css"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/11.1.0/nouislider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>


<div class="slider">
  <div id="slider-range-gehalt"></div>
</div>

<div class="label">
  <label for="gf">Slider value: </label>
  <span id="result-gehalt"></span>
</div>

1 Ответ

0 голосов
/ 26 сентября 2018

Видимо, я просто не могу проверить документацию noUiSliders.Я был настолько сосредоточен на этом конкретном «логарифмическом материале», что забыл проверить «нелинейность».Тем не менее, решение состоит в том, чтобы просто указать диапазону, какое значение и какой шаг вы хотели бы получить при каком процентном соотношении с ползунком.

Solutionlink: https://refreshless.com/nouislider/slider-values/

Поэтому я просто изменилкод: 

range: {
        'min': [0, 50000], //stepsize is 50.000
        '5%': [500000, 100000], //stepsize is 100.000
        '25%': [7000000],
        '50%': [10000000],
        '75%': [60000000, 500000], //stepsize is 500.000
        'max': [100000000]
    },

Большое спасибо тем, кто сталкивался.

...