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

many to many - Django Rest Framework ManyToMany filter multiple values -

i have 2 models, 1 defining users, other defining labels on these users. using django rest framework create api. able query users @ least labels ids 1 , 2. for instance users' labels are: [(1,2), (1,2,3), (2,3), (1,3)] want query return [(1,2), (1,2,3)] . so far, i've managed query users given label (let's id=1) doing: /api/users/?labels=1 , unable query users labels 1 , 2. i've tried /api/users/?labels=1,2 or /api/users/?labels=1&labels=2 return invalid users, i.e. users without labels 1 or 2... any welcome. thanks, dimitry github test repo: https://github.com/thedimlebowski/drf-m2m-filter code: models.py class label(models.model): name = models.charfield(max_length = 60) class user(models.model): labels = models.manytomanyfield(label) filters.py class userfilter(django_filters.filterset): labels = django_filters.filters.baseinfilter( name='labels', lookup_type='in', ) class meta:...
Read more

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

Image
i having issues populating data in subreport in title band of main report. data populated correctly in subreport in detail band of main report. trying find wrong in json query. appreciated. json sample data source (expenses.json) { "expenses": { "date": "8 sep 2016", "accounts": [ { "title": "xyz corp (111)", "accountname": "xyz corp", "accountnumber": "111", "transactions": [ { "date": "21 jun 2016", "name": "gas", "price": "17.50" }, { "date": "12 may 2016", "name": "shopping", "price": "111.99" }, { "date": "30 apr 2016", "name...
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