CODEWITHSUNDEEP
javascriptreactjs
Norfeldt
Norfeldt

Reputation: 9708

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

Upvotes: 1

Views: 4082

Answers (1)

Barry127
Barry127

Reputation: 1212

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.

Upvotes: 2

Related Questions