NoUISlider 工具提示仅显示整数

Question

我希望滑块上的工具提示仅显示“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];
});
    });

我的JS代码： http://jsfiddle.net/miiauwz/66a5ahm0/

Answer 1

您可以尝试使用 unencoded 值，如 noUISlider 关于 events and their binding

的文档中所述

slider.noUiSlider.on("update", function(values, handle, unencoded ) {
    // values: Current slider values;
    // handle: Handle that caused the event;
    // unencoded: Slider values without formatting;
});

或者另一种可能性是使用 format option on slider creation（但我自己还没有尝试过）：

noUiSlider.create(slider, {
    start: [ 20000 ],
    ...
    format: wNumb({
        decimals: 0, // default is 2
        thousand: '.', // thousand delimiter
        postfix: ' (US $)', // gets appended after the number
    })
});

缺点是您必须从此处单独下载 wNumb-Library：http://refreshless.com/wnumb/。

没有wNumb的另一种方式

再次查看 noUISlider 的示例后，我发现 this way 用于手动格式化（在页面底部）：

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

noUiSlider.create(sliderFormat, {
    start: [ 20 ],
    ...

    format: {
      to: function ( value ) {
        return value + ',-';
      },
      from: function ( value ) {
        return value.replace(',-', '');
      }
    }
});

Answer 2

我不想使用 wNumb - library，这个方法可能有用。这将为您提供没有小数的值。希望这有帮助。

value.split('.')[0]

Answer 3

这可以工作..

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

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

Answer 4

我想我会提供一个答案，以防其他人来找这个。只需将以下内容作为选项添加到 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
    }
});

Answer 5

如果您认为自己的网站永远不需要小数位，可以在 jquery.nouislider.min.js 文件中搜索 toFixed(2) 并替换为 toFixed(0)。

Answer 6





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

Answer 7

只需使用 Math 而不是库。

Math.round(value)

Answer 8

不使用任何其他库的可能方法。如果我们只想显示整数，则无需使用其他库。假设在 html 代码中有元素 'slider-fee'.

<div id="slider-fee"></div>

假设我们想要提供选择一天中的时间范围的可能性。类似于 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
});

noUiSlider - Integer Format

货币范围示例

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

noUiSlider - Currency Format

Answer 9

没有外部库的 React 示例：

<Nouislider
    range={{ min: 0, max: 5 }}
    tooltips={true}
    step={1}
    start={[0, 5]}
    connect
    format={{
      from: (value) => {
        return parseInt(value);
      },
      to: (value) => {
        return parseInt(value);
      }
    }}
    onSlide={onUpdate}
/>

NoUISlider 工具提示仅显示整数

NoUISlider Tooltip only show integers

javascript

integer

tooltip

nouislider