[Bug] Slider vertical styles do not match theme

[einazare]

Version

1.1.0 (latest)

Reproduction link

https://demos.creative-tim.com/black-dashboard-pro-react/#/admin/extended-forms

Operating System

Does not matter

Device

Does not matter

Browser & Version

Does not matter

Steps to reproduce

1. Go inside src/views/forms/ExtendedForms.js and replace everything with:

/*!

=========================================================
* Black Dashboard PRO React - v1.1.0
=========================================================

* Product Page: https://www.creative-tim.com/product/black-dashboard-pro-react
* Copyright 2020 Creative Tim (https://www.creative-tim.com)

* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*/
import React from "react";
// plugin that creates slider
import Slider from "nouislider";

// reactstrap components
import {
  Row,
  Col
} from "reactstrap";

// core components

class ExtendedForms extends React.Component {
  componentDidMount() {
    var slider1 = this.refs.slider1;
    Slider.create(slider1, {
      orientation: "vertical",
      start: [40],
      connect: [true, false],
      step: 1,
      range: { min: 0, max: 100 }
    });
  }
  render() {
    return (
      <>
        <div className="content">
          <Row>
            <Col md="4">
              <div style={{height: "300px"}}>
                <div className="slider" ref="slider1" />
              </div>
            </Col>
          </Row>
        </div>
      </>
    );
  }
}

export default ExtendedForms;

2. Start the product.
3. Go to page http://localhost:3000/admin/extended-forms
4. Notice how the slider does not match the styles from https://demos.creative-tim.com/black-dashboard-pro-react/#/admin/extended-forms or from https://demos.creative-tim.com/black-dashboard-pro-react/#/documentation/sliders

What is expected?

The vertical variation of the Slider(nouislider) plugin should look the same as the horizontal one.

What is actually happening?

The styles do not match the ones from the horizontal one.

---

Solution

1. Go inside src/assets/scss/black-dashboard-pro-react/react/plugins folder and create a new file named _plugin-nouislider.scss (so the path of the new file will be src/assets/scss/black-dashboard-pro-react/react/plugins/_plugin-nouislider.scss).
2. Inside the above file, add the following code:

.noUi-vertical {
  width: 1px;
  height: 100%;
  .noUi-handle {
    outline: none;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    cursor: pointer;
    left: -7px;
    top: -10px;
  }
}

3. Go inside src/assets/scss/black-dashboard-pro-react/react/_react-differences.scss file.
4. Between line 3 and line 4, add the following code:

@import "plugins/plugin-nouislider";

5. Now the vertical styles work as those from the horizontal ones.

Additional comments

NOTE: The vertical slider needs to be wrapped inside an element with a fixed height, that is why, in my example, I've wrapped it inside a div element with a style of height set to 300px. Feel free to change the height.