Open Voten641 opened 6 months ago
Your issue is with the styles not the radix primatives. You need to swap all height -> widths
and widths -> height
and change to flex-direction: column;
Here are some example styles from the radix documentation: https://www.radix-ui.com/primitives/docs/components/slider#slider
/* styles.css */
.SliderRoot {
position: relative;
display: flex;
align-items: center;
}
.SliderRoot[data-orientation='vertical'] {
flex-direction: column;
width: 20px;
height: 100px;
}
.SliderTrack {
position: relative;
flex-grow: 1;
background-color: grey;
}
.SliderTrack[data-orientation='vertical'] {
width: 3px;
}
.SliderRange {
position: absolute;
background-color: black;
}
.SliderRange[data-orientation='vertical'] {
width: 100%;
}
.SliderThumb {
display: block;
width: 20px;
height: 20px;
background-color: black;
}
Bug report
Current Behavior
Slider when it has orientation vertical can be moved from top to bottom but only like couple px, and the bar is still horizontal
Expected behavior
Should be vertical
Reproducible example
CodeSandbox Template
Additional context
it also dont work in vue and in electron
Your environment
electron