我正在做一个带滑块的Web表单，用HTML滑块作为输入方式，目前已经能在页面上实时显示滑块当前值了，但遇到了一个奇怪的问题：

当我通过clamp逻辑（限制在0-1之间，基于当前值加减0.05）计算滑块的最小和最大值后，在控制台输出这些值时，结果和滑块实际设置的值完全对不上。

比如我把滑块调到0.025，预期控制台应该输出：

Acousticness - Current value: 0.025, Min value: 0, Max value: 0.075

但实际输出却是类似这样的：

Acousticness - Current value: 0.60000000000001, Min value: 0.55, Max value: 0.65000000000001

而且这个问题不是只有边界测试才会出现，任何值都可能出问题，有时候输出又突然正常了，完全摸不着头脑。

以下是我的完整代码：

JavaScript 代码 #

// Define a class for slider controls
class Slider {
  // Constructor method to initialize a slider
  constructor(name, initialValue) {
    // Store the name of the slider
    this.name = name; 
    // Set the initial value of the slider
    this.value = initialValue; 
    // Calculate the minimum and maximum values based on initial value
    // These will be used to provide a range of potential values for the SQL query
    // This will provide us with a greater number of songs for the playlist
    // Ensure minValue is at least 0 (The minimum value for all Spotify variables)
    this.minValue = Math.max(0, this.value - 0.05);
    // Ensure maxValue is at most 1 (The maximum value for all Spotify variables)
    this.maxValue = Math.min(1, this.value + 0.05); 
  }

  // Method to set a new value for the slider
  setValue(newValue) {
    // Restrict the value to a specific range as outlined by minValue and maxValue (Clamping)
    // If it does exceed the range limits it is adjusted to stay within said limits
    this.value = Math.min(Math.max(newValue, this.minValue), this.maxValue);
    // Update minValue based on the new value
    this.minValue = Math.max(0, this.value - 0.05);
    // Update maxValue based on the new value
    this.maxValue = Math.min(1, this.value + 0.05);
  }

  // Method to get the current value of the slider
  getValue() {
    // Return the current value of the slider
    return this.value;
  }

  // Method to get the minimum value of the slider
  getMinValue() {
    // Return the current minimum value of the slider
    return this.minValue;
  }


  // Method to get the maximum value of the slider
  getMaxValue() {
    // Return the current maximum value of the slider
    return this.maxValue;
  }
}

// Create instances of Slider class for each variable
const sliders = {
  Acousticness: new Slider('Acousticness', 0.5),
  //Danceability: new Slider('Danceability', 0.5),
  //Energy: new Slider('Energy', 0.5),
  //Instrumentalness: new Slider('Instrumentalness', 0.5),
  //Valence: new Slider('Valence', 0.5),
  //Speechiness: new Slider('Speechiness', 0.5),
  //Liveness: new Slider('Liveness', 0.5)
};

// Add event listeners to sliders
document.addEventListener('DOMContentLoaded', () => {
  // Iterate over each slider object
  Object.keys(sliders).forEach(key => {
    // Get the current slider object
    const slider = sliders[key];
    // Find the corresponding slider input element in the HTML using its ID
    const sliderElement = document.getElementById(`${key.toLowerCase()}Slider`);
    // Add event listener to detect changes in slider value
    sliderElement.addEventListener('input', () => {
      // Update value of Slider object
      const sliderValue = parseFloat(sliderElement.value);
      slider.setValue(sliderValue);
      // Update display element with current slider value
      const sliderValueElement = document.getElementById(`${key.toLowerCase()}Value`);
      // Fixes the text value to be within 3 decimal places
      sliderValueElement.textContent = sliderValue.toFixed(3); 
    });
  });
    // Add event listener to the submit button
  const submitButton = document.querySelector('button[type="submit"]');
  submitButton.addEventListener('click', (event) => {
    // Prevent the default form submission behavior
    event.preventDefault();    
    // Iterate through each slider object
    Object.keys(sliders).forEach(key => {
      const slider = sliders[key];
      // Log the current value, minimum value, and maximum value of the slider
      console.log(`${slider.name} - Current value: ${slider.getValue()}, Min value: ${slider.getMinValue()}, Max value: ${slider.getMaxValue()}`);
    });
  });  
});

HTML 代码 #

<!-- Label for slider -->
<label for="acousticnessSlider">Acousticness:</label> 
<!-- Range input element type for the slider -->
<input type="range" id="acousticnessSlider" min="0" max="1" step="0.001" value="0.5">
<!-- Span to display current value of the slider -->
<span id="acousticnessValue" class="slider-value">0.5</span>
<br> <!-- Line break -->

<button type='submit'>Submit</button>

我现在完全搞不懂哪里出问题了——是console.log的逻辑有问题？还是滑块值初始化的方式不对？或者是我没考虑到的其他情况？有没有大佬能帮忙看看，真的非常感谢！

备注：内容来源于stack exchange，提问作者Milosharkey