0

目前，我的滑块最小值和最大值分别为 4 和 100，默认情况下显示网格。我可以在其中添加自定义标签，但无法以更好的方式实现它。

我想要的是https://prnt.sc/1177ou5。我目前的代码是：

.showcase__mark { 显示：块；位置：绝对；顶部：45px；背景：#f00；填充：1px 3px；边框半径：3px；颜色：#fff; 左边距：-10px；} 
<script>
var min = 4;
var max = 100;

    var marks = [25, 50, 75];

$(document).ready(function() {
            
            <!-- var sliderRangeDifference = 100 - 4; -->
            <!-- var sliderStepThreshold = 110; -->
            <!-- var setLargerMarkers = sliderRangeDifference > sliderStepThreshold;     -->
            
                
            $(".js-range-slider").ionRangeSlider({
                skin: "big",
                min: min,
                max: max,
                grid: true
                <!-- onStart: function(data) {  -->
                 <!-- addMarks(data.slider);  -->
                <!-- }                       -->
                                        
            }); 
 
});

function convertToPercent(num) {
    return (num - min) / (max - min) * 100;
}

function addMarks($slider) {
    var html = '';
    var left = 0;
    var left_p = "";
    var i;

    for (i = 0; i < marks.length; i++) {
        left = convertToPercent(marks[i]);
        left_p = left + "%";
        html += '<span class="showcase__mark" style="left: ' + left_p + '">';
        html += marks[i];
        html += '</span>';
    }

    $slider.append(html);
}

</script>
4

0 回答 0