Norfeldt Norfeldt - 1 month ago 34
React JSX Question

React Slider Component

I'm trying to figure out how to implement a component like react-rangeslider but having some start-up challenges.

I trying out create-react-app and fiddling inside the

App
component. I got this far:

import React, { Component } from 'react';
import './App.css';

import Slider from 'react-rangeslider';

class App extends Component {

constructor() {
super();
this.state = {
speed: 4
};
}

componentDidMount() {
this.setState({
speed: 3
});
}

render() {
return (
<div className="App">
<h2>{this.state.speed}</h2>
<p>The page did render..</p>

<Slider
min={1}
max={4}
step={1}
value={this.state.speed}
onChange={(newVal) => {
console.log('Sliding..');
this.setState({
speed: newVal
});
}
}
/>
</div>
);
}
}

export default App;


But no slider appeas on the page... only the header and paragraph..

Update



This is what the React Inspection looks like:

React Inspect

Answer

In addition to my comment try adding this css to your page:

.rangeslider{margin:20px 0;position:relative;background:#e6e6e6}.rangeslider .rangeslider__fill,.rangeslider .rangeslider__handle{position:absolute}.rangeslider,.rangeslider .rangeslider__fill{display:block;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}.rangeslider .rangeslider__handle{background:#fff;border:1px solid #ccc;cursor:pointer;display:inline-block;position:absolute}.rangeslider .rangeslider__handle:active{background:#999}.rangeslider-horizontal{height:20px;border-radius:10px}.rangeslider-horizontal .rangeslider__fill{height:100%;background:#27ae60;border-radius:10px;top:0}.rangeslider-horizontal .rangeslider__handle{width:40px;height:40px;border-radius:40px;top:-10px}.rangeslider-vertical{margin:20px auto;height:150px;max-width:10px;background:none}.rangeslider-vertical .rangeslider__fill{width:100%;background:#27ae60;box-shadow:none;bottom:0}.rangeslider-vertical .rangeslider__handle{width:30px;height:10px;left:-10px}.rangeslider-vertical .rangeslider__handle:active{box-shadow:none}@media screen and (min-width:1200px){#mount{width:600px}}

I've copied the styles from the demo page so it's all minimized.

There is a full less file in the example directory on the github repo.

Comments