docs/src/pages/components/slider/CustomValueReducerSlider.js
function valueReducer(rawValue, props, event) {
  const { disabled, max, min, step } = props;

  function roundToStep(number) {
    return Math.round(number / step) * step;
  }

  if (!disabled && step) {
    if (rawValue > min && rawValue < max) {
      if (rawValue === max - step) {
        // If moving the Slider using arrow keys and value is formerly an maximum edge value
        return roundToStep(rawValue + step / 2);
      }
      if (rawValue === min + step) {
        // Same for minimum edge value
        return roundToStep(rawValue - step / 2);
      }
      return roundToStep(rawValue);
    }
    return rawValue;
  }

  return defaultValueReducer(rawValue, props, event);
}
function valueReducer(rawValue, props, event) {
  const { disabled, max, min, step } = props;

  function roundToStep(number) {
    return Math.round(number / step) * step;
  }

  if (!disabled && step) {
    if (rawValue > min && rawValue < max) {
      if (rawValue === max - step) {
        // If moving the Slider using arrow keys and value is formerly an maximum edge value
        return roundToStep(rawValue + step / 2);
      }
      if (rawValue === min + step) {
        // Same for minimum edge value
        return roundToStep(rawValue - step / 2);
      }
      return roundToStep(rawValue);
    }
    return rawValue;
  }

  return defaultValueReducer(rawValue, props, event);
}
function valueReducer ( rawValue , props , event ) { const { disabled , max , min , step } = props ; function roundToStep ( number ) { return Math . round ( number / step ) * step ; } if ( ! disabled && step ) { if ( rawValue > min && rawValue < max ) { if ( rawValue === max - step ) { // If moving the Slider using arrow keys and value is formerly an maximum edge value return roundToStep ( rawValue + step / 2 ) ; } if ( rawValue === min + step ) { // Same for minimum edge value return roundToStep ( rawValue - step / 2 ) ; } return roundToStep ( rawValue ) ; } return rawValue ; } return defaultValueReducer ( rawValue , props , event ) ; }
a value reducer that will snap to multiple of 10 but also to the edge value
Useful here because the max=104 is not a multiple of 10
a value reducer that will snap to multiple of 10 but also to the edge value Useful here because the max = 104 is not a multiple of 10