How I can transform a range of Bootstrap in vertical?

Question

I have the following code that makes a horizontal range in Bootstrap:

<label for="customRange3" class="form-label">Example range</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

I need to know how I can transform it in a vertical "range".

Answer 1

Try the code below and check if it solve your problem:

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

<input type="range" orient="vertical" />