[Slider] Is invisible for some scenarios

[hiteshgpt]

Problem description

Working on a project with Material UI. For some reason, the Slider component is invisible in the browser. Only the handle to move the slider is visible. The slider moves perfectly on x-axis and the value is also updated, but its just the visibility part that is missing (screenshot below)

Versions

• Material-UI: 0.16.7
• React: 15,4,2
• Browser: Chrome (55.0.2883.87 (64-bit)) & Firefox (51.0.1 (64-bit))

[lucasbento]

There's no way for us to track down your issue without you providing a running code for it.

Please provide at least a simple working example of your problem so we can help you out.

[hiteshgpt]

Here is the component I am trying to insert. Using Gulp and Browserify to package my Bundle.js

`class RangeSlider extends React.Component { constructor(props) { super(props); this.state = {slider: 50}; }

handleSlider = (event, value) => {
    this.setState({slider: value});
};

render() {
    return(
        <div>
            <Slider min={0} max={100} step={1} defaultValue={50} value={this.state.slider}
                    onChange={this.handleSlider}
            />
        </div>
    );
}

}`

I deep dived in chrome dev tools and found that for some strange reason the width of slider is being marked invalid (screenshot below). Because of this the axis is not visible, but the handle is moving fine. There are many other material ui components I am using which are working perfectly fine. Just the slider has this issue

[redwind]

it's happened with me in case i wrap Slider by a div with display:'flex'. i resolved it by add style={{width:'100%'}} to Slider

[hiteshgpt]

Thanks @redwind . I am not using flexbox. Just bootstrap for some basic layout. Tried resetting the width using both style and sliderStyle properties, but still no luck... Tried placing the component near the root - just next to MuiThemeProvider .. still the same issue..

[hiteshgpt]

Identified the issue. I was using userAgent = "all" in my muiTheme object for my isomorphic app. The same React component and muiTheme object was getting used both at server and client. So client was not able to get the actual user agent and instead used "all", which was causing this issue.

I switched the user agent to 'global.navigator.userAgent' and updated by server.js to assign the correct user agent to global.navigator.

[pencilcheck]

I used false for the value for user agent and fixed that as well.