ion-range-slider - ion RangeSlider：在自定义值的情况下自定义网格

Question

我有以下滑块设置：

$("#experience-filter").ionRangeSlider({
    values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, '15+'],
    grid: true,
    force_edges: true,
    step: 5,
    onFinish: function (data) {
        $("#experience-filter").parent().find('.check input[type="checkbox"]').prop('checked',true);
    }
});

我不想在我的网格中包含所有值。但是有 0、5、15+ 之类的。这可能吗？

Answer 1

在您的情况下，尝试不同的方法会容易得多：

var $range = $(".js-range-slider");
var $result = $(".js-result");

function transform (n) {
	if (n > 15) {
    	return "15+";
    }
    
    return n;
}

$range.ionRangeSlider({
    type: "single",
    min: 0,
    max: 16,
    grid: true,
    grid_snap: true,
    step: 5,
    prettify: function (n) {
		return transform(n);
    }
});

<!-- include jQuery, and rangeslider -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css" integrity="sha256-nv5vSBJAzPy+07+FvRvhV2UPpH87H/UnWMrA6nbEg7U=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js" integrity="sha256-eXdxIh/sjKTNi5WyC8cKHekwPywORiomyiMFyZsowWw=" crossorigin="anonymous"></script>


<div class="range-slider">
    <input type="text" class="js-range-slider" value="" />
</div>