Multiple slider doesn't render start values

[brambow]

Using v0.7.0

import React, { useState } from 'react';
import { Segment } from 'semantic-ui-react';
import { Slider } from 'react-semantic-ui-range';

const FilterSlider = () => {
  const [values, setValues] = useState([0, 5000]);
  const settings = {
    start: [0, 5000],
    min: 0,
    max: 5000,
    step: 1,
    onChange: array => {
      setValues(array);
    }
  };
  return (
    <Segment>
      <Slider multiple value={values} color="teal" settings={settings} />
    </Segment>
  );
};

export default FilterSlider;

Result on first render:

What I expect to see

[brambow]

Interestingly, when I attempted my actual use case, which was dynamically adding the slider based on a button click, it renders as expected:

[renato]

I was having the same issue, but testing a little further the it happened with non-multiple ranges too.

Apparently it happens when the Slider isn't visible on initialization. On my scenario it was inside a <Accordion/>, so if the inner panel isn't visible when the Slider is first rendered, the start values don't show up because this.inner.offsetWidth equals 0.

react-semantic-ui-range/lib/elements/slider.js

Lines 92 to 96 in 6f537a0

	const position =
	Math.round(ratio * this.inner.offsetWidth) +
	trackLeft -
	innerLeft -
	this.state.offset;

I could try a PR but I don't know if @iozbeyli is still accepting them.

[TimMcCauley]

Greetings @renato - I am facing the same issue. Do you have a workaround at hand?

[renato]

Hey @TimMcCauley, I ended up using another slider component (rc-slider), so I don't have a workaround at hand, unfortunately.

[TimMcCauley]

Thank you @renato, I will check it out! Appreciated.