title: How do I set the width (in pixels) of an input slider?
body: <p>To this HTML code:</p>
  
  <pre><code>&lt;div&gt;
     &lt;code&gt;/range/1-3&lt;/code&gt;&lt;br /&gt;
     &lt;input type="range" value="0" min="0" max="100" onchange="send('/range/1', parseInt(this.value))" /&gt;&lt;br /&gt;
     &lt;input type="range" value="0" min="0" max="100" onchange="send('/range/2', parseInt(this.value))" /&gt;&lt;br /&gt;
     &lt;input type="range" value="0" min="0" max="100" onchange="send('/range/3', parseInt(this.value))" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to add some CSS in the header of my HTML file to set the width of certain classes of slider.</p>
  
  <p>Here's a link to the whole file which include 3 CSS definitions and a short JS for passing values in and out of the sliders.</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
  
        var ws = null
  
        window.addEventListener('load', function() {
          if ('WebSocket' in window) {
            ws = new WebSocket('ws://localhost:60001')
            ws.onmessage = function(e) {
              var m = JSON.parse(e.data)
              if (m) {
                var e = document.getElementById(m[0])
                if (e)
                  e.value = parseInt(m[1] * 100)
              }
            }
          }
        })
  
        function send(k, v) {
          var m = JSON.stringify([k, v])
          if (ws &amp;&amp; ws.OPEN)
            ws.send(m)
          if (console)
            console.log(m)
        }
  
      &lt;/script&gt;
          &lt;style type="text/css" media="screen"&gt;
  
              div {
                  margin-bottom: 1em;
              }
  
              code {
                  color: gray;
              }
              .slider-width {
                  width: 100px;
              }
  
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div&gt;
        &lt;code&gt;/qc/lfo/1&lt;/code&gt;&lt;br /&gt;
        &lt;input id="/qc/lfo/1" type="range" /&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;code&gt;/range/1-3&lt;/code&gt;&lt;br /&gt;
        &lt;input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/1', parseInt(this.value))" /&gt;&lt;br /&gt;
        &lt;input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/2', parseInt(this.value))" /&gt;&lt;br /&gt;
        &lt;input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/3', parseInt(this.value))" /&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;code&gt;/checkbox/1-3&lt;/code&gt;&lt;br /&gt;
        &lt;input type="checkbox" onchange="send('/checkbox/1', this.checked)" /&gt;
        &lt;input type="checkbox" onchange="send('/checkbox/2', this.checked)" /&gt;
        &lt;input type="checkbox" onchange="send('/checkbox/3', this.checked)" /&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;code&gt;/radio/1&lt;/code&gt;&lt;br /&gt;
        &lt;input type="radio" name="/radio/1" value="1" onchange="send('/radio/1', 1)" /&gt;
        &lt;input type="radio" name="/radio/1" value="2" onchange="send('/radio/1', 2)" /&gt;
        &lt;input type="radio" name="/radio/1" value="3" onchange="send('/radio/1', 3)" /&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;code&gt;/text/1&lt;/code&gt;&lt;br /&gt;
        &lt;input type="text" name="/text/1" onkeyup="send(this.name, this.value)" /&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;code&gt;/select/1&lt;/code&gt;&lt;br /&gt;
        &lt;select name="/select/1" onchange="send(this.name, this.value)"&gt;
          &lt;option value="First"&gt;First&lt;/option&gt;
          &lt;option value="Second"&gt;Second&lt;/option&gt;
          &lt;option value="Third"&gt;Third&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
        &lt;code&gt;/button/1&lt;/code&gt;&lt;br /&gt;
        &lt;input type="button" name="/button/1" value="button" onmousedown="send(this.name, true)" onmouseup="send(this.name, false)" onmouseout="send(this.name, false)" /&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>