Repository: h2oai/wave
File: ui/src/range_slider.tsx (TypeScript)

Code before:
  /** True if the form should be submitted when the slider value changes. */
  trigger?: B
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

export const XRangeSlider = ({ model }: { model: RangeSlider }) => {
  const
    { min = 0, max = 100, step = 1, min_value = min, max_value = max, disabled, trigger, name, label } = model,
    [valRange, setValRange] = React.useState<[U, U]>([min_value, max_value]),
    onChange = React.useCallback((_val: U, val_range?: [U, U]) => {
      if (val_range) {
        wave.args[name] = val_range
        model.min_value = val_range[0]
        model.max_value = val_range[1]
        setValRange(val_range)
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [name]),
    onChanged = React.useCallback(() => { if (trigger) wave.push() }, [trigger])

  React.useEffect(() => {
    const lowerValue = typeof min_value == 'number' && min_value > min && min_value <= max ? min_value : min
    const value = typeof max_value == 'number' && max_value > min && max_value <= max ? max_value : max
    wave.args[name] = [lowerValue, value]
    setValRange([lowerValue, value])
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [min_value, max_value])

  return (
    <div data-test={name}>
      <Fluent.Slider
        ranged
        max={max}
        min={min}
        step={step}
        label={label}
        lowerValue={valRange[0]}
        value={valRange[1]}
        disabled={disabled}
        onChange={onChange}
        onChanged={onChanged}
      />
    </div>
  )
}

Review comment (suggestion):
Nit: naming

```suggestion
    const upperValue = typeof max_value == 'number' && max_value > min && max_value <= max ? max_value : max
```

Code after:
  /** True if the form should be submitted when the slider value changes. */
  trigger?: B
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
}

export const XRangeSlider = ({ model }: { model: RangeSlider }) => {
  const
    { min = 0, max = 100, step = 1, min_value = min, max_value = max, disabled, trigger, name, label } = model,
    [valRange, setValRange] = React.useState<[U, U]>([min_value, max_value]),
    onChange = React.useCallback((_val: U, val_range?: [U, U]) => {
      if (val_range) {
        wave.args[name] = val_range
        model.min_value = val_range[0]
        model.max_value = val_range[1]
        setValRange(val_range)
      }
    }, [model, name]),
    onChanged = React.useCallback(() => { if (trigger) wave.push() }, [trigger])

  React.useEffect(() => {
    const lowerValue = typeof min_value == 'number' && min_value > min && min_value <= max ? min_value : min
    const upperValue = typeof max_value == 'number' && max_value > min && max_value <= max ? max_value : max
    wave.args[name] = [lowerValue, upperValue]
    setValRange([lowerValue, upperValue])
  }, [min_value, max_value, min, max, name])

  return (
    <div data-test={name}>
      <Fluent.Slider
        ranged
        max={max}
        min={min}
        step={step}
        label={label}
        lowerValue={valRange[0]}
        value={valRange[1]}
        disabled={disabled}
        onChange={onChange}
        onChanged={onChanged}
      />
    </div>
  )
}