creativetimofficial / ct-black-dashboard-pro-react

Black Dashboard PRO React: A premium Boostrap & Reactstrap Admin Template
https://www.creative-tim.com/product/black-dashboard-pro-react
40 stars 18 forks source link

[Bug] Slider vertical styles do not match theme #30

Closed einazare closed 3 years ago

einazare commented 4 years ago

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:
    
    /*!

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

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

*/ 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 ( <>

        </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.
<!-- generated by creative-tim-issues. DO NOT REMOVE -->