Slider orientation vertical

[Voten641]

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

[FredrikMWold]

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;
}