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:
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 -->
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
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
=========================================================
*/ 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 ( <>
} }
export default ExtendedForms;
.noUi-vertical { width: 1px; height: 100%; .noUi-handle { outline: none; border-radius: 50%; height: 15px; width: 15px; cursor: pointer; left: -7px; top: -10px; } }
@import "plugins/plugin-nouislider";