New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider Plugin Does Not Work Vertically #5

Closed
pkellner opened this Issue Aug 15, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@pkellner

pkellner commented Aug 15, 2018

When the Slider is changed to vertical, it does not work. It just shows up as a square box.

https://demos.creative-tim.com/material-kit-pro-react/?_ga=2.27182397.1622210057.1533927310-835262904.1533774280#/documentation/nouislider

`


<Nouislider
orientation={"vertical"}
start={[0, 100]}
connect={[false, true, false]}
step={1}
range={{ min: 0, max: 100 }}
/>

`

Also, wrapp is spelled wrap and should be updated on that page.
If you want to add color to your slider you need to wrapp the

@EINazare EINazare added the bug label Aug 16, 2018

@EINazare

This comment has been minimized.

Collaborator

EINazare commented Aug 16, 2018

Hello again @pkellner ,

Thank you for pointing us this issue.
Here is a quick fix which will be added in our next update as well:
Go inside src/assets/scss/plugins/_plugin-nouislider.scss and add the following code (at line 85):

.noUi-vertical {
  width: 2px;
  margin: 0 15px;
}

.noUi-vertical .noUi-handle {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    left: -6px;
    top: -10px;
    cursor: pointer;
    border-radius: 100%;
    transition: all 0.2s ease-out;
    border: 1px solid $brand-primary;
    background: $white-color;

    @include shadow-2dp();
}

and also delete these lines from 85:

.noUi-vertical {
	width: 18px;
}
.noUi-vertical .noUi-handle {
	width: 28px;
	height: 34px;
	left: -6px;
	top: -17px;
}

You will also need to give a height to the wrapper element of the slider.
Example:

<div style={{height: "100px"}}>
          <Nouislider
                    orientation="vertical"
                    start={[40]}
                   connect={[true, false]}
                    step={1}
                    range={{ min: 0, max: 100 }}
          />
</div>

Hope that information helps you. Please let us know if we can help you with anything else.

Best,
Manu

@pkellner

This comment has been minimized.

pkellner commented Aug 17, 2018

Sadly, this did not work. I went into your example (SectionBasic.jsx) and added the div as you specified below the existing Nouis horizontal slider. I got no vertical height. When I inspect the scroller, for the computed height it shows nothing (grayed out).

I made a wild guess change and added height to .noUi-vertical as follows and it did actually work but I'm not exactly sure why or how to incorporate height into my page (the div you showed above does not do it).

.noUi-vertical {
width: 2px;
height: 100px;
margin: 0 15px;
}

@pkellner

This comment has been minimized.

pkellner commented Aug 17, 2018

Actually, changing the height to "height: 100%" does seem to work. Hmm. I'm out of my depth here.

@EINazare EINazare closed this Oct 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment