How do I set the width (in pixels) of an input slider?

html css input slider

38,696

.slider-width100
{
    width: 100px;
}

The code above is the width definition syntax you should use for styling the width. This will be in a separate css file which should be linked into the page. To use it you should set the class attribute of the tag like this:

class="slider-width100"

If your rule is overwritten by other rules which have a higher css priority, you might consider to use this ugly hack in your css rule definition:

.slider-width100
{
    width: 100px !important;
}

38,696

Author by

wide_eyed_pupil

One of those right brain left brain individuals who gets a buzz from problem solving in both hemispheres. Push comes to shove I'd take the right brain role (be it illustrator, design, art direction or UI/UX) and work with a hard core left brain coder. I like to use Apples Quartz Composer framework since it's a nice overlap of both and also I never learned serious professional grade coding despite starting 30 years ago on DG, ND, Digital mainframes as a 10 yo in Basic Fortran and Pascal then moving on to an Apple ][e and discovering peaks and pokes. I've also worked in Film and Theatre as a production designer and studied Architecture (my first love) for some time.

Updated on May 27, 2020

Comments

wide_eyed_pupil almost 4 years

To this HTML code:

<div>
   <code>/range/1-3</code><br />
   <input type="range" value="0" min="0" max="100" onchange="send('/range/1', parseInt(this.value))" /><br />
   <input type="range" value="0" min="0" max="100" onchange="send('/range/2', parseInt(this.value))" /><br />
   <input type="range" value="0" min="0" max="100" onchange="send('/range/3', parseInt(this.value))" />
</div>

I would like to add some CSS in the header of my HTML file to set the width of certain classes of slider.

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" charset="utf-8">

      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 && ws.OPEN)
          ws.send(m)
        if (console)
          console.log(m)
      }

    </script>
        <style type="text/css" media="screen">

            div {
                margin-bottom: 1em;
            }

            code {
                color: gray;
            }
            .slider-width {
                width: 100px;
            }

    </style>
  </head>
  <body>

    <div>
      <code>/qc/lfo/1</code><br />
      <input id="/qc/lfo/1" type="range" />
    </div>

    <div>
      <code>/range/1-3</code><br />
      <input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/1', parseInt(this.value))" /><br />
      <input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/2', parseInt(this.value))" /><br />
      <input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/3', parseInt(this.value))" />
    </div>

    <div>
      <code>/checkbox/1-3</code><br />
      <input type="checkbox" onchange="send('/checkbox/1', this.checked)" />
      <input type="checkbox" onchange="send('/checkbox/2', this.checked)" />
      <input type="checkbox" onchange="send('/checkbox/3', this.checked)" />
    </div>

    <div>
      <code>/radio/1</code><br />
      <input type="radio" name="/radio/1" value="1" onchange="send('/radio/1', 1)" />
      <input type="radio" name="/radio/1" value="2" onchange="send('/radio/1', 2)" />
      <input type="radio" name="/radio/1" value="3" onchange="send('/radio/1', 3)" />
    </div>

    <div>
      <code>/text/1</code><br />
      <input type="text" name="/text/1" onkeyup="send(this.name, this.value)" />
    </div>

    <div>
      <code>/select/1</code><br />
      <select name="/select/1" onchange="send(this.name, this.value)">
        <option value="First">First</option>
        <option value="Second">Second</option>
        <option value="Third">Third</option>
      </select>
    </div>

    <div>
      <code>/button/1</code><br />
      <input type="button" name="/button/1" value="button" onmousedown="send(this.name, true)" onmouseup="send(this.name, false)" onmouseout="send(this.name, false)" />
    </div>

  </body>
</html>

wide_eyed_pupil almost 12 years

When I use this style inside the HTML file it works fine. When I put in external file it doesn't work. Can't workout why, CSS is loading because text colour style changes work. WHat might I be doing wrong?
Lajos Arpad almost 12 years

You have removed the "answer" attribute from my answer. Can you tell me why and what was the problem?
Lajos Arpad almost 12 years

Are you sure the rule was put into the same CSS which you were successfully linked to the page? Are you sure there is no other CSS rule which overwrites this rule because of a higher priority? Also, if this works in your HTML then we can say for sure that your problems don't originate from this rule, because it's working. You could test this by creating a CSS file containing only this rule and linking this file only to your HTML. This would be a proof of concept.