Question

我正在使用ionrangeslider进行项目，我想自定义标签和图例。正如你在我的jsfiddle上看到的那样，传奇从10分钟到360分钟开始。有没有办法将示例转换为360分钟到6小时以及标签。

也许使用函数美化吗？

谢谢你的帮助！

$("#example_id").ionRangeSlider({
    min: 10,
    max: 360,
    step: 10,
    grid: true,
    grid_num: 1,
    postfix: ' mn'
});

http://jsfiddle.net/spitfire378/reLmLpa2/

Answer 1

您可以使用美化选项功能创建自定义标签（可在文档中找到）。作为值参数，可用于格式化标签，如下所示：

$("#example_id").ionRangeSlider({
    min: 10,
    max: 360,
    step: 10,
    grid: true,
    grid_num: 1,
    postfix: ' mn',
    prettify: function(value){
        if(value < 60){
            return value + ' mn';
        }else{
            return Math.round(value / 60) + ' h';
        }
   }
});

Answer 2

使用美化功能：

function my_prettify (n) {
            var num = n;
            var hours = (num / 60);
            var rhours = Math.floor(hours);
            var minutes = (hours - rhours) * 60;
            var rminutes = Math.round(minutes);
            if(rhours<1)
                return rminutes + " min";
            else
                if(rminutes==0)
                    return rhours + " hour";
                else
                    return rhours + " hour & " + rminutes + " min";

        }

$(".js-range-slider").ionRangeSlider({
     type: "single",
     min: 0,
     max: 450,
     step: 15,
     grid: true,
     prettify: my_prettify,
 });

ion rangelider将分钟转换为小时

2 个答案: