noUiSlider将点数转换为对数外观
noUiSlider将点数转换为对数外观
提问于 2018-09-26 04:31:26
我有几个类似下面例子的noUiSliders。我想要将数字点数和滑块值更改为对数外观。因此，在下面的示例中，我希望中间值为1000万(而不是5000万)。因此，例如100.000到250.000之间的步数小于2300万到3000万之间的步数。如下所示：
|----|----|----|----|----|--------|--------|-------------------|-------------|
0亿元人民币，700万元人民币，1000万元人民币，25亿元人民币，7亿元人民币，1000万元人民币，1000万元人民币，1000万元人民币，1000万元人民币，1000万元人民币，1000万元人民币，1000万元人民币，2500万元人民币，30亿元人民币，30亿元人民币，1000万元人民币，100亿元人民币。
我也查看了noUiSlider网站和其他网站，但我没有得到如何开始的方法。所以我在这方面向你寻求帮助。提前感谢您阅读我的文章。
//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
Stack Overflow用户
发布于 2018-09-26 18:48:23
显然，我只是无法查看noUiSliders的文档。我太专注于那个特定的“对数东西”了，以至于我忘记检查“非线性”。然而，解决方案是，只需告诉范围什么值和什么步长，你想要在什么百分比的滑块。
解决方案链接：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]
},非常感谢那些遇到的人。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52506235
复制相关文章
相似问题
腾讯云开发者
