javascript - Reduce the Spacing between vertically aligned input ranges -


i want create simple equalizer gui using html , css , maybe js. problem how can edit spacing between before , after vertical input range? can see when aligning multiple sliders take space. how deal this?? html part put each individual input element in div can align them next each other using 'inline-block' , in 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>

what specifying width?

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

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


-

Comments

Post a Comment

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

i have following question: i have variable value in program declared value. i want convert value byte array.. how can serialize byte array , back? found examples related other types such double or int, not any. this should need. it's pretty similar how 1 in java. import java.io.{bytearrayinputstream, bytearrayoutputstream, objectinputstream, objectoutputstream} object serialization extends app { def serialise(value: any): array[byte] = { val stream: bytearrayoutputstream = new bytearrayoutputstream() val oos = new objectoutputstream(stream) oos.writeobject(value) oos.close stream.tobytearray } def deserialise(bytes: array[byte]): = { val ois = new objectinputstream(new bytearrayinputstream(bytes)) val value = ois.readobject ois.close value } println(deserialise(serialise("my test"))) println(deserialise(serialise(list(1)))) println(deserialise(serialise(map(1 -> 2)))) println(deserialise(seri...
Read more

Slow performance first queries on SQL Azure -

i have small database (50mb) , i'm on basic plan. there single user, need create many databases (always 1 per user) since used training purposes. each database created doing following statement: create database training1 copy of modeldatabase1 we seem getting very slow performance when first query database, afterwards seems acceptable. to give idea: have sp: startupevents runs when application started. query takes 25 seconds run first time. seems incredible since database small, , tables query calls don't contain many records. if run procedure afterwards executes immediately... how can avoid this?
Read more

Java Entity Manager - JSON reader was expecting a value but found 'db' -

i have code working: entitymanager entitymanager = getentitymanager(); entitymanager.gettransaction().begin(); string query = "db.band.find({})"; list<band> list = (list<band>) entitymanager.createnativequery(query, band.class).getresultlist(); entitymanager.close(); return list; it returns list no problem. want sort list date : entitymanager entitymanager = getentitymanager(); entitymanager.gettransaction().begin(); string query = "db.band.find({something__id:objectid(\"" + myid + "\")}).sort({\"somethingelse.date\":-1})"; list<band> list = (list<band>) entitymanager.createnativequery(query, band.class).getresultlist(); entitymanager.close(); return list; my console gives me message: org.bson.json.jsonparseexception: json reader expecting value found 'db' i checked string working in mongo console , did. ideas? edit: tried putting "something__id" between quotes because would...
Read more