IskandarG IskandarG - 3 months ago 17
CSS Question

Reduce the Spacing between vertically aligned input ranges

I want to create a simple equalizer gui using html and css and my maybe some JS. My problem is how can I edit the spacing between before and after the vertical input range? As you can see when aligning multiple sliders they take up too much space. How to deal with this?? For the html part I put each individual input element in a div so that I can align them next to each other using 'inline-block' , as you will in the code pasted below



input.vertical {
-webkit-appearance: slider-vertical;
writing-mode: bt-lr;
}
.aligned {
display: inline-block;
}
.block{
display: block;
}
input[type=range]{
padding-left: 0px;
padding-right: 0px;
}

<div class="aligned">
<p>Gain</p>
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<p>Gain</p>
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<form>
<label class="block"><input type="radio" name="radgroup" value="A"></label>
<label class="block"><input type="radio" name="radgroup" value="A"></label>
<label class="block"><input type="radio" name="radgroup" value="A"></label>
<label class="block"><input type="radio" name="radgroup" value="A"></label>
<label class="block"><input type="radio" name="radgroup" value="A"></label>
</form>
</div>
<div class="SF-container">
<div class="aligned" style="padding-right: 0px; margin-left:0px; display: inline-block;">
<p>Subsonic Filter</p>
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
<div class="aligned">
<input type="range" id="fader" min="0" value="100" max="100" step="5" oninput="outputUpdate(value)" class="vertical" orient="vertical">
</div>
</div>




Answer

What about specifying a width?

 input.vertical {
    -webkit-appearance: slider-vertical;
    width: 30px;
 }

http://codepen.io/paulcredmond/pen/ORVbRp