rangeslider - 离子量程滑块将分钟转换为小时

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