CODEWITHSUNDEEP
reactjsslider
basti
basti

Reputation: 123

Drag to Change not possible when material-ui slider is styled

Once I start styling the Slider-Component from material-ui the Drag-to-Change-Value does only work on Click, but NOT on Drag. So I can change the value by clicking somewhere on the Slider-Track, but I cannot drag the slider to change value.

I already tried styling it with 'styled-components', yet the sane problem occurs.

...

   thumb: {
     height: 35,
     width: 35,
     border: '1px solid var(--grey)',
     boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
     backgroundColor: 'var(--light-font)',
   },
   track: {
     backgroundColor: 'var(--primary-color)',
     height: 3,
     borderBottom: '1px solid grey',
   },
   trackAfter: {
     backgroundColor: 'var(--bg-grey)',
   },
 })(Slider)

 return (
   <>
     <h6>Weekly Goal: {weeklyGoal[page]}hr</h6>
     <StyledSlider
       style={{ touchAction: 'none' }}
       type="range"
       min={0}
       max={20}
       step={1}
       value={weeklyGoal[page]}
       onChange={handleGoalChange}
     />
   </>
 )
}

Upvotes: 4

Views: 2441

Answers (1)

Abraham L
Abraham L

Reputation: 424

I am surprised nobody has replied to this question yet since it is probably a common error. Here's what I think is going on:

It seems you (we) were trying to wrap the withStyles HOC within another HOC, for example:

const styled = (component) => props => {
  const Foo = withStyles({})(component);
  return <Foo {...props} />
}

The mistake is in treating styled as a HOC when it should only return the result of withStyles(), i.e. Foo in the above example. Otherwise it will be instantiating a new Foo everytime the props change, hence not reflecting the expected state changes. This is what the code should be instead:

const styled = (component) => {
  const Foo = withStyles({})(component);
  return Foo;
}

In your case you should have returned StyledSlider only (not the JSX), then using it and passing props to it where required.

Upvotes: 1

Related Questions