Slider: `createSliderWithTooltip` changes Slider API, specifically, `handleStyle` prop type.

[dvshur]

Hi there,

I noticed that a common Slider and one enhanced with createSliderWithTooltip have different APIs in handleStyle prop. Common slider accepts Object | Array<Object>, while enhanced — only Array<Object>. So it basically forces using array, even if the user has only one handle.

I assume this happens because of this lines in src/createSliderWithTooltip.jsx:58, specifically

<Handle
  // ...
  style={{
    ...handleStyle[0],
  }}
  // ...

I believe this enhancer should perform a check whether Array or Object is provided in the prop, and react accordingly in order to preserve wrapped Slider API.

[fabyeah]

For me the createSliderWithTooltip version accepts neither, it can't be styled. Am I doing something wrong? Does it work for you?

I tried

<Slider
  handleStyle={ { backgroundColor: 'red' } }
/>

and

<Slider
  handleStyle={ [{ backgroundColor: 'red' }] }
/>

All the other styling options work for me as passed style objects.

[gwevans]

@fabyeah It should be your second one but doesn't seem to be working. I'm working on a <Range /> instead of a <Slider />.

I'm using:
const Range = Slider.createSliderWithTooltip(Slider.Range);

and styling 2 handles like:

handleStyle={[
    {
        backgroundColor: 'green'
    },
    {
        backgroundColor: 'red'
    }
]}

However it styles both of my handles green. I have even copy pasted examples from here and they don't work as they should, styling all of the handles with the first object's styling.

[dvshur]

@gwevans, of course they don't work, look at the code again:

<Handle
  // ...
  style={{
    ...handleStyle[0],
  }}
  // ...

it simply takes the first element of a provided handleStyle array and applies it to the handle. I believe it should be fixed, but unfortunately this issue has not received any contributors' attention yet.