[Feature Requests] Spectrum-Slider options & customizability

Photoshop
,
7

Yes I have a solution for that, it all works fine now. Essentially, these are the steps you need to do:

  1. Add a mousedown listener on your element
  2. On mousedown, add a mousemove and mouseup listener to the document
  3. On mousemove, read out the value. I recommend checking it against the previous value to prevent unnecessary many function calls (if you do calculations based on the value). Because not every mousemove equals a change of the slider value.
  4. On mouse up, remove the mousemove listener from the document

That’s a common piece of logic for drag interactions which I’ve already used several times (e.g. for the custom scrollbars), so I don’t know why it took me so long to figure this out :smiley:

Here’s the code: (just a bit of React in there, just ignore that. The this.props.onChange is just a function to delegate the new value to the parent component)

private handleMouseDown = () => {
  document.addEventListener('mousemove', this.handleMouseMove)
  document.addEventListener('mouseup', () => document.removeEventListener('mousemove', this.handleMouseMove))
}

private handleMouseMove = () => {
  const newValue = parseFloat(this.sliderRef.value)
  if (this.props.onChange && this.props.value !== newValue) {
    this.props.onChange(newValue)
  }
}
/* in the view: */
<div onMouseDown={this.handleMouseDown}>
  <sp-slider ref={ref => this.sliderRef = ref} min={min} max={max} value={value} />
</div>