Slider: Basic example doesn't even work

[ghost]

I'm on the latest version: 3.1.4 with [email protected]

I can't get a simple basic slider to work without getting the following error:

Cannot read property 'toFixed' of undefined

Any clue what's this about? I need to apparently set the marks props... but that won't make it a basic slider right?

[vgoklani]

I have the same issue, I did a fresh pull via npm and it's now broken with the same error as above

[just-boris]

Hello! We have a demo: http://react-component.github.io/slider/ Checked this right now, it works fine.

Is it work for you? And what is your setup of the slider? Here can be mismatches with our examples.

[pkese]

Same problem here. My code is

<Slider min={0} max={2880} defaultValue={30} value={30} />

The exception is thrown in function trimAlignValue with closestPoint = undefined:

return step !== null ? parseFloat(closestPoint.toFixed(this.getPrecision())) : closestPoint;

[just-boris]

• you cannot use value without onChange handler. The slider behaves like a React input tag. The example renders read only slider. I left only defaultValue and then it worked fine.
• created a jsfiddle with demo: https://jsfiddle.net/bpgtxmcp/ Does it work in your browser?

also, maybe @benjycui can help

[benjycui]

@pkese Sorry, I can not re-produce that exception with your code. Could you fork @just-boris ' jsfiddle and try to re-produce it? THX.

[ghost]

I got my problem solved because i realised i had an problem specific to my project.
Basically, the parent container containing the slider was being redrawing twice (once before i fetch data from my api, and the when the data is fetched). At the second instance, for some reason no value was passed to the slider which was causing closestPoints to be null. (Value is v passed here)
I solved it by simply refactoring my code, and having that slider redrawn once.

However, i still face the problem when i use livereload (My code is based out of react-transform boilerplate). See it loads allright the first time but then with livereload, it breaks, forcing me to do a refresh.

I think your jsfiddle is not realistic because u attach the slider to a reactdom.
Maybe, if the demo attached the slider to a parent module, and then have some external thing going on, could help.

@benjycui Bottom line, try and put ur slider under a component that get redrawn after a fetch. I think that could reproduce the problem.

P.S. thx for the plugin though. its the only good one i could find for react out there :) Kudos for that!

[ghost]

Here's another example that would break the code:

export default class extends Component {
  shouldComponentUpdate = shouldPureComponentUpdate;
  constructor(props) {
    super(props)
    this.onAfterChange = this.onAfterChange.bind(this)
    this.state = {marks: marks}
  }
  onAfterChange(value) {
    var o = {
      [value]: `${value}`
    }
    marks = {...marks, ...o}
    this.setState({marks: marks})
  }
  render() {
    return (
      <div style={[this.props.style, style.base]}>
        <Slider
          defaultValue={200}
          marks={this.state.marks}
          max={2000}
          step={10}
          tipTransitionName="rc-slider-tooltip-zoom-down"
          onAfterChange={this.onAfterChange} />
      </div>
    );
  }
}

I am dynamically changing the marks when the tooltip position value changes.
Right after i do this once, bam --> Cannot read property 'toFixed' of undefined

See, the problem is after an existing slider is redrawn.

[just-boris]

Okay, reproduced it: https://jsfiddle.net/3svbvpoq/
Thanks for the report, will try to figure out.

[ghost]

sure! Thanks for the swift response @just-boris :)

[benjycui]

Fixed in d976cce and will be merged into master after #59

[benjycui]

Try 3.2.0

[Evilcat325]

I run into the same issue. After setting break point before the error,I found that I set the defaultValue as [0,100] and forget to put range on the Slider. Then the Slider is trying to use the array as a number to calculate the closestPoint which result in null reference. I think it would be good to check the defaultValue then choose how to calculate the closestPoint or send a warning to let the use set rang on their slider

[benjycui]

@SenLi325 I agree. Actually, I am trying to refactor rc-slider, to seperate Slider into Slider and Slider.Range. So that rc-slider can check defaultValue with propTypes and other advantages.

[Evilcat325]

@benjycui Thx for the info. By the way if we are separatingslider range, we should be able to set a minstep props on the slider the current allowCross is not the perfect solution and there is a bug that if you put the max as the same with the min, you can not change the min after
(the max or whatever changed last is on the most top layer)
Sliderdid not judge whether the user is trying to change the range from a single dot to a rang(should allow cross) or the user is trying to cross the range(should stop cross).
A min step props will come in handy at this time for example if I am asking the user to select a value as a price filter, a single dot on a range selector will not work as intented

[sunsheeppoplar]

Are there any updates on this? I think I'm experiencing the same issues. My Slider is being called in a stateless prop that looks like this:

function ProviderSideBar(props) {

    var providers = props.self.state.providers;

    // find all the start and end times of each provider
    var handleTimeSlots = ProvidersSideBarHelper.getTimesForSliderHandles(providers);

    // slider expects number values, so we have to format them via the tipFormatter method they include for us
    return (
        <Slider 
            defaultValue={[
                ProvidersSideBarHelper.convertToUnix(handleTimeSlots.earliestSliderTime),
                ProvidersSideBarHelper.convertToUnix(handleTimeSlots.latestSliderTime)
            ]} 
            max={ProvidersSideBarHelper.convertToUnix(handleTimeSlots.latestSliderTime)} 
            min={ProvidersSideBarHelper.convertToUnix(handleTimeSlots.earliestSliderTime)} 
            range={true} 
            tipFormatter={ProvidersSideBarHelper.convertToMomentObj} onAfterChange={props.self.filterByTime} 
        />
    )
}

export default ProviderSideBar;

I end up getting a TypeError where it can't read format of undefined. I'm pretty sure it's similar to previous issues?

[benjycui]

@sunsheeppoplar could you provide an online re-producible demo? With codepen or jsfiddle?

[cpruijsen]

the slider doesn't fire off an event object -- like regular input tags.
That would be preferred, so one could use e.target.name and e.target.value in handlers -- especially when you have multiple sliders for different values.

[benjycui]

@cpruijsen

<Slider onChange={(v) => this.handleChange('name', v)} />

[vaibhav1902]

I have entered start as 1 and end as 15 with step of 5. the slider moves out of the available rail and goes up to 16. Also got warning 'Slider[max] - Slider[min] (14) should be a multiple of Slider[step] (5)'. Is there any way to rounding it of?