Add support for undefined values

[sghall]

Add support for undefined values

[sghall]

Sorry. Missed this one. Hmmmm...not sure I want to do this. Can you tell me a little more about the use case? I'm just thinking I would set it to some placeholder value with it disabled until I had the actual value(s). Or possibly not show the slider and put some placeholder component until the values are known.

[xinsight]

The use case is to differentiate the slider having a value of zero versus the slider having no value.

For example: If I had a questionnaire that could be partially completed and resumed, I would like the slider to look different if it has never been used to set a value from when it has been used to set the value of 0.

[sghall]

Oh, I see. Just pass an empty array for the values prop, right? You don't have to pass a value. You can change the way it looks however you want when the array has length zero.

[xinsight]

Ha, I didn't think of trying <Slider values={[]}/> (i only tried [undefined] and [null]).

Ok, so an empty array avoids a warning and defaulting to the max, but it means that the handles array passed from <Handles> is empty... which makes sense, since by passing an empty array, i'm stating that I don't have any handles... So i need to create a default Handle manually... I can get a static one that never changes - but this is starting to feel quite messy.

<Handles>
          {({ handles, getHandleProps }) => (
            <div className="slider-handles">
              {handles.length === 0 && <Handle handle={{id: 'DEFAULT', value: 0, percent: 0} getHandleProps={()=>{}}}/>}
              {handles.map(handle => (
                (<Handle
                  key={handle.id}
                  handle={handle}
                  getHandleProps={getHandleProps}
                  isVertical={isVertical}
                  disabled={disabled}
                />)
              ))}
            </div>
          )}
        </Handles>

It would be better if values={[undefined]} would return a handle of {id, value: NaN, percent: NaN} (or undefined instead of NaN) as then that would be easier to detect and render.

(I'm not supporting multiple sliders, but allowing undefined values would mean that you could have one or more sliders undefined. e.g. values=[50, undefined, 75])

tldr; [] has a different meaning than [undefined]

[sghall]

How about just default the props in the Handle component? Then...

<Handles>
  {({ handles, getHandleProps }) => (
    <div className="slider-handles">
      {handles.length === 0 ? (
        <Handle />
      ) : (
        {handles.map(handle => (
          (<Handle
            key={handle.id}
            handle={handle}
            getHandleProps={getHandleProps}
            isVertical={isVertical}
            disabled={disabled}
          />)
        ))}
      )}
    </div>
  )}
</Handles>

[xinsight]

<Handle /> gives me an error 'cannot call id', so I need to add in the handle object. and then there is an error that getHandleProps is not a function. Once i add that back in, i've got the same as before <Handle handle={{id: 'x'}} getHandleProps={()=>{}}}/> and then i cannot drag the handle. It looks like I would need a way to set the initial value from dragging the empty <Handle /> and i'm not sure how to do that...

[sghall]

Just default the props in the Handle component. This is really more of a react question than a question about this library. Hopefully this has got you steered in the right direction.