如何配置支持小数（起始值0.001）的ionRangeSlider范围滑块？

Let's get your slider working with decimal values—here's what's missing and how to fix it:

The core issue is that ionRangeSlider defaults to integer steps by default. Just changing your starting value to 0.001 won't work unless you explicitly configure the slider to handle decimals. Here's the revised code with all necessary adjustments:

<script> 
$.each($('.slider-input'), function() { 
    var $t = $(this), 
        from = parseFloat($t.data('from')), // Parse to float to ensure decimal handling
        to = parseFloat($t.data('to')), 
        $dailyProfit = $($t.data('dailyprofit')), 
        $totalProfit = $($t.data('totalprofit')), 
        $val = $($t.data('valuetag')), 
        perDay = $t.data('perday'), 
        perYear = $t.data('peryear'); 

    $t.ionRangeSlider({ 
        input_values_separator: ";", 
        prefix: '{{ $basic->symbol }}', 
        hide_min_max: true, 
        force_edges: true,
        step: 0.001, // Critical: Define the decimal step size
        prettify_enabled: false, // Prevent automatic formatting that rounds decimals
        onChange: function(val) { 
            $val.val( '{{ $basic->symbol }}' + val.from.toFixed(3)); // Show 3 decimal places
            var profit = (val.from * perDay / 100).toFixed(3); // Adjust decimal precision as needed
            profit = '{{ $basic->symbol }}' + profit; 
            $dailyProfit.text(profit); 

            profit = ( (val.from * perDay / 100)* perYear ).toFixed(3); 
            profit = '{{ $basic->symbol }}' + profit; 
            $totalProfit.text(profit); 
        } 
    }); 
}); 

$('.invest-type__profit--val').on('change', function(e) { 
    var slider = $($(this).data('slider')).data("ionRangeSlider"); 
    // Parse the value to float to handle decimals correctly
    slider.update({ from: parseFloat($(this).val().replace('{{ $basic->symbol }}', "")) }); 
}) 
</script>

Key Changes Explained: #

• step: 0.001: This tells the slider to increment/decrement by 0.001 each time, which is essential for supporting your starting value of 0.001. Adjust this if you need a different step size (e.g., 0.01 for two decimal places).
• parseFloat() for data attributes: Ensures that the from and to values from your HTML data attributes are treated as decimals instead of strings.
• prettify_enabled: false: Disables the slider's default number formatting, which would otherwise round decimals to integers.
• toFixed(3): Adjusts the displayed precision to 3 decimal places (matching your 0.001 start value). Change this to 2 if you only need two decimals, etc.
• Decimal handling in the update function: Using parseFloat() when updating the slider from the input ensures that decimal values are processed correctly.

Important HTML Note: #

Make sure your slider element has the correct decimal values in its data attributes, like this:

<input class="slider-input" 
       data-from="0.001" 
       data-to="100.000" <!-- Or your desired max value -->
       data-dailyprofit="#daily-profit" 
       data-totalprofit="#total-profit" 
       data-valuetag="#value-tag" 
       data-perday="5" 
       data-peryear="365">

This should resolve the issue and let your slider handle decimal values starting at 0.001 smoothly.

内容的提问来源于stack exchange，提问作者Waqar Ali