In order to do you intend there will be some steps to follow:
1. Add an extra item to your values (Set it to empty. You will notice that in the grid slider the value will be ZERO.
2. In your CSS file, add a display none to the first grid item.
3. Modify your rangeslider js function.
//Define list in your backend
$scale_list = array("","FAIR", "GOOD", "VERY GOOD", "EXCELLENT");`
//HTML component
<div data-parent="cut" class="inline">
<p class="sub-panel-title" data-filter="cut">Cut <i class="fa fa-question"></i></p>
<div class="slider cut-filter">
<input type="text" class="inline cut grid-slider js-range-slider" data-filter="cut" data-type="doubled" data-grid="true" data-values="{','|implode:$scale_list}" data-from="0" data-to="{count($scale_list)-1}" name="cut" data-from-max="{count($scale_list)-2}" data-to-min="1" value=""/>
</div>
</div>
//CSS
.irs-grid-text.js-grid-text-0{display: none}
//JS Code
$(".cut-filter .grid-slider.js-range-slider").ionRangeSlider({
skin:"sharp",
onStart:function(data){
var slider_obj = data.input.parents(".slider").find("span.irs-grid-text");
$.each(slider_obj, function() {
if(!$(this).hasClass("js-grid-text-0")){
var left_percent = $(this).get(0).style.left;
var minus_value =5;
var modified_percent = parseInt(left_percent)-minus_value;
$(this).css("left", modified_percent+'%');
}
});
},
onFinish: function (data) {
var instance = data.input.data("ionRangeSlider");
//var referrer = $('.diamonds .filters').data('referrer');
instance.options['to_min']= data.from+1;
instance.options['from_max']= data.to-1;
data.input.addClass('modified');
//fetchDiamonds();
}
});
