Javascript NoUISlider工具提示仅显示整数

我希望滑块上的工具提示只显示像“130”这样的整数，而不是“130.00”。 我只是不知道从哪里开始

这是我的密码：

$( 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];
});
    });

$（文档）.ready（函数（）{
var groessSlider=document.getElementById（'slider-tooltip'）；
创建（GroessSlider{
开始：[145]，
步骤：1，
范围：{
"分":100,，
“最大”：250
}
});
});
$（文档）.ready（函数（）{
var groessSlider=document.getElementById（'slider-tooltip'）；
var tipHandles=groessSlider.getElementsByClassName（'noUi-handle'），
工具提示=[]；
//将div添加到滑块控制柄。
对于（变量i=0；i

我的JS代码：

---

您可以尝试使用noUISlider关于

或者另一种可能是使用（但我自己还没有尝试过）：

缺点是您必须从此处单独下载wNumb库：

---

没有wNumb的另一种方式

在再次查看noUISlider的示例后，我发现了手动格式化的方法（在页面底部）：

---

如果您不想使用wNumb-library，这个方法可能会起作用。 这将为您提供不带小数的值。 希望这有帮助

value.split（'.'）[0]

这是可行的

var sliderFormat = document.getElementById('slider-format');

noUiSlider.create(sliderFormat, {
start: [ 20 ],
...
format: {
    from: function(value) {
            return parseInt(value);
        },
    to: function(value) {
            return parseInt(value);
        }
    }
});

---

我想我会提供一个答案，以防有人来找这个。只需在noUiSlider创建中添加以下选项：

tooltips: [ wNumb({ decimals: 0 }), wNumb({ decimals: 0 }) ],

以下代码将创建所需的滑块，其中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
    }
});

---

如果您认为您的站点不需要小数点，您可以在jquery.nouislider.min.js文件中搜索

toFixed（2）

，并替换为

toFixed（0）

只需使用数学而不是库

Math.round(value)

---

不使用任何其他库的可能方法。如果我们只想显示整数，就不需要使用其他库。假设html代码中有元素“sliderfee”

让我们假设，我们希望能够在一天中选择一个小时范围。比如7h-19h或8h-20h，在工具提示中，我们只想显示整数

dragTapSlider = document.getElementById('slider-fee');

// number of decimal places 
decimals = 0;

// format object
numberFormat = {
    // 'to' the formatted value. Receives a number.
    to: function (value) {
        return value.toFixed(decimals);
    },
    // 'from' the formatted value.
    // Receives a string, should return a number.
    from: function (value) {
        return Number(value);;
    }
};

noUiSlider.create(dragTapSlider, {
    start: [8, 20],
    connect: [false, true, false], 
    step: 1,
    behaviour: 'drag',
    tooltips: [true, true],
    range: {
        'min': 1,
        'max': 24
    },
    format: numberFormat
});

货币范围示例

dragTapSlider = document.getElementById('slider-fee');

decimals = 2;
suffix = '€';

numberFormat = {
    // 'to' Format the value to currency.
    to: function (value) {
        return value.toFixed(decimals) + ' ' + suffix;
    },
    // 'from' Convert currency value to number.
    // Receives a string, should return a number.
    from: function (value) {
        return Number(value.replace(' ' + suffix));
    }
};

noUiSlider.create(dragTapSlider, {

    start: [25, 40],
    connect: [false, true, false],
    step: 0.5,
    behaviour: 'drag',
    tooltips: [true, true],
    range: {
        'min': 20,
        'max': 50
    },
    format: numberFormat
});

---

谢谢，但它不起作用，我得到了这个错误：Uncaught ReferenceError:wNumb没有定义，而且未编码的方法不会改变任何东西：/@Juloius你是否尝试过像这样访问未编码的值：

未编码的[handle]

？我不知道你“acces”这个值是什么意思，我对Javascript非常陌生，抱歉，谢谢！，我下载了wnumb库，它可以工作：）@Juloius如果您对除使用wnumb之外的其他两种方法感兴趣，下面是一个使用未编码值的JSFIDLE：还有一个使用手册

from

-和

to

-方法：谢谢！很高兴有一个不需要额外依赖项的解决方案，因为库应该是“最小的”到目前为止最好的解决方案伟大的解决方案，不需要添加wNum或修改库来删除小数。这应该是公认的答案。效果很好！这当然是解决问题的方法。这不考虑取舍。请解释你的答案。普通的事情是一个步骤，没有定义handlevalue。在你的答案中添加一些描述，以便更容易理解，让用户了解代码在做什么

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];
});

Math.round(value)

dragTapSlider = document.getElementById('slider-fee');

// number of decimal places 
decimals = 0;

// format object
numberFormat = {
    // 'to' the formatted value. Receives a number.
    to: function (value) {
        return value.toFixed(decimals);
    },
    // 'from' the formatted value.
    // Receives a string, should return a number.
    from: function (value) {
        return Number(value);;
    }
};

noUiSlider.create(dragTapSlider, {
    start: [8, 20],
    connect: [false, true, false], 
    step: 1,
    behaviour: 'drag',
    tooltips: [true, true],
    range: {
        'min': 1,
        'max': 24
    },
    format: numberFormat
});

dragTapSlider = document.getElementById('slider-fee');

decimals = 2;
suffix = '€';

numberFormat = {
    // 'to' Format the value to currency.
    to: function (value) {
        return value.toFixed(decimals) + ' ' + suffix;
    },
    // 'from' Convert currency value to number.
    // Receives a string, should return a number.
    from: function (value) {
        return Number(value.replace(' ' + suffix));
    }
};

noUiSlider.create(dragTapSlider, {

    start: [25, 40],
    connect: [false, true, false],
    step: 0.5,
    behaviour: 'drag',
    tooltips: [true, true],
    range: {
        'min': 20,
        'max': 50
    },
    format: numberFormat
});