javascript NoUISlider Tooltip 只显示整数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31631816/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
NoUISlider Tooltip only show integers
提问by Juloius
I want that the tooltip on my slider only shows integers like "130" and not "130.00". I just dont know where i could start.
我希望滑块上的工具提示只显示像“130”这样的整数而不是“130.00”。我只是不知道我可以从哪里开始。
Here is my code:
这是我的代码：
$( document ).ready(function() {
var groesseslider = document.getElementById('slider-tooltip');
noUiSlider.create(groesseslider, {
start: [ 145 ],
step: 1,
range: {
'min': 100,
'max': 250
}
});
});
$( document ).ready(function() {
var groesseslider = document.getElementById('slider-tooltip');
var tipHandles = groesseslider.getElementsByClassName('noUi-handle'),
tooltips = [];
// Add divs to the slider handles.
for ( var i = 0; i < tipHandles.length; i++ ){
tooltips[i] = document.createElement('div');
tipHandles[i].appendChild(tooltips[i]);
}
// When the slider changes, write the value to the tooltips.
groesseslider.noUiSlider.on('update', function( values, handle ){
tooltips[handle].innerHTML = values[handle];
});
});
My JS Code: http://jsfiddle.net/miiauwz/66a5ahm0/
我的 JS 代码：http: //jsfiddle.net/miiauwz/66a5ahm0/
回答by user2540197
This can work..
这可以工作..
var sliderFormat = document.getElementById('slider-format');
noUiSlider.create(sliderFormat, {
start: [ 20 ],
...
format: {
from: function(value) {
return parseInt(value);
},
to: function(value) {
return parseInt(value);
}
}
});
回答by SaSchu
You can either try using the unencodedvalue like described in noUISlider's documentation about events and their binding
您可以尝试使用unencodednoUISlider 关于事件及其绑定的文档中描述的值
slider.noUiSlider.on("update", function(values, handle, unencoded ) {
// values: Current slider values;
// handle: Handle that caused the event;
// unencoded: Slider values without formatting;
});
or another possibility would be using the format option on slider creation(but haven't tried it myself yet):
或者另一种可能性是在滑块创建时使用格式选项（但我自己还没有尝试过）：
noUiSlider.create(slider, {
start: [ 20000 ],
...
format: wNumb({
decimals: 0, // default is 2
thousand: '.', // thousand delimiter
postfix: ' (US $)', // gets appended after the number
})
});
The drawback is you have to download the wNumb-Library separately from here: http://refreshless.com/wnumb/.
缺点是您必须从这里单独下载 wNumb-Library：http://refreshless.com/wnumb/ 。
Another way without wNumb
没有 wNumb 的另一种方式
After having another look at the examples from noUISlider, I found this wayfor manually formatting (at the bottom of the page):
在再次查看 noUISlider 的示例后，我发现了这种手动格式化的方式（在页面底部）：
var sliderFormat = document.getElementById('slider-format');
noUiSlider.create(sliderFormat, {
start: [ 20 ],
...
format: {
to: function ( value ) {
return value + ',-';
},
from: function ( value ) {
return value.replace(',-', '');
}
}
});
回答by Bill_VA
If you don't think you'll ever need to have decimal places on your site, you can search the jquery.nouislider.min.js file for toFixed(2)and replace with toFixed(0).
如果您认为您的网站上永远不需要小数位，您可以在 jquery.nouislider.min.js 文件中搜索toFixed(2)并替换为toFixed(0).
回答by achharsh
I you don't want to use wNumb - library , this method might work. This will give you value without decimals. Hope this helps.
我不想使用 wNumb - library ，这种方法可能有效。这将为您提供没有小数的价值。希望这可以帮助。
value.split('.')[0]
回答by Omar Rida
Figured I'd provide an answer in case someone else comes looking for this. Simply add the following as an option to the noUiSlider creation:
想我会提供一个答案，以防其他人来找这个。只需将以下内容作为选项添加到 noUiSlider 创建中：
tooltips: [ wNumb({ decimals: 0 }), wNumb({ decimals: 0 }) ],
The following code will create the slider you need with the noUiSlider tooltip displaying only the integer value with no decimal points:
以下代码将使用 noUiSlider 工具提示创建您需要的滑块，仅显示整数值而没有小数点：
$( document ).ready(function() {
var groesseslider = document.getElementById('slider-tooltip');
noUiSlider.create(groesseslider, {
start: [ 145 ],
step: 1,
tooltips: [ wNumb({ decimals: 0 }), wNumb({ decimals: 0 }) ],
range: {
'min': 100,
'max': 250
}
});
回答by Ilhom
Проверенно)
Проверенно)
var skipSlider = document.getElementById('price');
noUiSlider.create(skipSlider, {
start: [47000, 247000],
connect: true,
behaviour: 'drag',
step: 1,
range: {
'min': [47000],
'max': [247000]
},
});
var skipValues = [
document.getElementById('min-price'),
document.getElementById('max-price')
];
skipSlider.noUiSlider.on('update', function (values, handle, unencoded) {
skipValues[handle].innerHTML = unencoded[handle];
});
回答by chris_r
Just use Math for this instead of the library.
只需为此使用 Math 而不是库。
Math.round(value)
