Как сделать вертикальный стилизованный input[type=range]?

Question

[ICUI4CU]

Мне необходимо сделать стилизованный вертикальный input[type=range], в частности для chrome
Погуглив, я нашел два варианта как сделать его вертикальным:
1) -webkit-appearance: slider-vertical
2) горизонтальный + transform: rotate
Первый вариант не подходит, так как для стилизации нужно применить -webkit-appearance: none, а у нас для этого свойства уже указано значение
Ниже мой вариант с rotate

Как его в данном примере расятьнуть по высоте на 100% (красная зона)? Либо покажите ваш вариант с transform: rotate и динамической высотой.

Comments

[Ankhena]

Либо покажите ваш вариант с transform: rotate и динамической высотой.

На JS получаете высоту и передаете её в кастомное --height и задаете эту высоту (ширину) инпуту.

p.s. jsfiddle не работает в России, так что если хотите, чтобы мы смотрели песочницу, то переделайте на codepen.io

[ICUI4CU]

Ankhena, меня интересует решение на чистом css, если это возможно

[Ankhena]

ICUI4CU, покажите всю задачу. Потому что пока не понятно назначение wrapper и его ширины.

В общем, на css это можно сделать через aspect-ratio, если устраивает поддержка.
У родителя не должно быть ширины, а только высота 100% и aspect-ratio 1.
Инпуту ширину 100%.
Ну там всякие фишечки, чтобы эта обертка не мешалась типа pointer-events

[ICUI4CU]

Потому что пока не понятно назначение wrapper и его ширины.

Это попытка избавится от пустоты справа после трансформации.

[Ankhena]

ICUI4CU, когда вы пишете комментарий просто так, то никто о нем не узнает, кроме подписчиков. Используйте кнопочку Ответить.

У меня случайно вкладка осталась открытой.

[Ankhena]

ICUI4CU, ну вот уберите ширину у wrapper и задайте aspect-ratio, если позволяет поддержка.
И width 100% для инпута.