Need help in the Ion range slider

[Jaspreet-shine123]

Currently I am having the slider min and maximum as 4 and 100 and grid is displaying by default. I can add the custom labels in it but cant achieve in a better way .

what I want is https://prnt.sc/1177ou5 . My current code is :

    <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>

[IonDen]

Try to play with grid_num param.

[Jaspreet-shine123]

Thank you Ion den for replying , but grid_num will divide the grid into number of parts it will not change the markers labels which is calculated by default library.

$(".js-range-slider").ionRangeSlider({ skin: "big", min: min, max: max, grid: true, grid: 4

                }); 

            What I need is :      https://prnt.sc/11797jr  

            Please help

[Jaspreet-shine123]

What i need is :

[IonDen]

grid_num is 4 by default. Set it to 20 or something.

[IonDen]

I see that you want 25 and 50 and 75.

Problem is that your starting point is 4, not 0. And that means that automatic calculation of grid will not give you nice round numbers.

2 ways to fix this:

1. set grid_num to 10-20 to mask the problem
2. disable default grid and add your own grid a layer under slider.

[Jaspreet-shine123]

disable default grid and add your own grid a layer under slider , How can I add my own grid layer ionden ?

can you send me the code plse .. What i want is this

[Jaspreet-shine123]

Please reply Ionden

[IonDen]

It is easy. Open inspector. Find current grid. Copy paste it. Disable grid, then add copy pasted code on the page (change values to desired ones)

[Jaspreet-shine123]

Can you please share us the code sample .. we tried it not worked on our end Ion den

[IonDen]

Example: https://jsfiddle.net/IonDen/o3xcwyh0/

[Jaspreet-shine123]

Thnks for the code Ion den , but we will face issue in aligning the html Ion den.

[IonDen]

Come on guys. Positioning elements is already off topic. Please ask on Stack Overflow.