ion RangeSlider: customize grid in case of custom values

Question

I have the following slider setup:

$("#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);
    }
});

I prefer not to have all the values in my grid. But have it like 0, 5, 15+. is this possible?

Answer 1

In your case, it would be much easier to try a different approach:

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>