在离子范围滑块方面需要帮助

如何解决在离子范围滑块方面需要帮助

目前我将滑块的最小值和最大值设为 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>