title: jQuery / CSS - Changing slider to go beyond 100% but stay inside div
body: <p>I am currently editing a jQuery slider. I want to have the same effect that the jQuery UI slider have - there you can input a max, like "2500", and then the slider can go to that, without breaking out of the div / screen.</p>
  
  <p>Here is my slider: <a href="http://jsfiddle.net/uHNsv/" rel="nofollow">http://jsfiddle.net/uHNsv/</a></p>
  
  <pre><code>#slider {
    height: auto;
    background: none;
    padding: 0;
    margin: 0;
    border: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
  }
  #slider .ui-slider-handle {
    top: 65px !important;
  }
  
  #slider::before, .slider-filled-top {
    -webkit-transform: rotateX(70deg);
    -moz-transform: rotateX(70deg);
    -ms-transform: rotateX(70deg);
    -o-transform: rotateX(70deg);
    transform: rotateX(70deg);
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  
  #slider {
    width: 400px;
    margin: 0 auto;
    position: relative;
    margin: 50px auto;
    display: block;
    -webkit-perspective: 200;
    -moz-perspective: 200;
    -ms-perspective: 200;
    -o-perspective: 200;
    perspective: 200;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  #slider input[type="range"] {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    z-index: 10;
    background: transparent;
    -webkit-appearance: none;
    -moz-apperance: none;
  }
  #slider input[type="range"]::-webkit-slider-thumb {
    background: #f9f9f9;
    display: inline-block;
    width: 30px;
    height: 18px;
    margin-top: 3px;
    -webkit-appearance: none;
    -moz-apperance: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: dimgrey 0 2px 2px -1px;
    -moz-box-shadow: dimgrey 0 2px 2px -1px;
    box-shadow: dimgrey 0 2px 2px -1px;
  }
  #slider::before, #slider::after {
    content: "";
    display: block;
    width: 400px;
    height: 50px;
    background: rgba(233, 233, 233, 0.6);
    margin: 0;
    z-index: 0;
  }
  #slider::before {
    position: absolute;
    background: #f9f9f9;
  }
  #slider::after {
    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(204, 204, 204, 0.9)), color-stop(100%, rgba(228, 228, 228, 0.9)));
    background-image: -webkit-linear-gradient(bottom, rgba(204, 204, 204, 0.9) 0%, rgba(228, 228, 228, 0.9) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(204, 204, 204, 0.9) 0%, rgba(228, 228, 228, 0.9) 100%);
    background-image: -o-linear-gradient(bottom, rgba(204, 204, 204, 0.9) 0%, rgba(228, 228, 228, 0.9) 100%);
    background-image: linear-gradient(bottom, rgba(204, 204, 204, 0.9) 0%, rgba(228, 228, 228, 0.9) 100%);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 10px 10px -5px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 10px 10px -5px;
    box-shadow: rgba(0, 0, 0, 0.4) 0 10px 10px -5px;
  }
  
  .slider-filled-top,
  .slider-filled-front {
    background: #9cde45;
    width: 50%;
    height: 50px;
  }
  
  .slider-filled-front {
    position: absolute;
    background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #4aaf1b), color-stop(100%, #82d02f));
    background-image: -webkit-linear-gradient(bottom, #4aaf1b 0%, #82d02f 100%);
    background-image: -moz-linear-gradient(bottom, #4aaf1b 0%, #82d02f 100%);
    background-image: -o-linear-gradient(bottom, #4aaf1b 0%, #82d02f 100%);
    background-image: linear-gradient(bottom, #4aaf1b 0%, #82d02f 100%);
  }
  </code></pre>
  
  <p>My slider, however, doesn't do that. I can only make it go to 100% - changing the width of the input will just make it go beyond the screen and making it very long horizontal.</p>
  
  <p>How can I make so the maximum for the slider will fit into the div area that is getting filled?</p>