A CodePen by Christophe Benoliel Molina. Adjust Controls (updated 22/10/12) - inspired from Dribbble shot by Nikolay Verin http://dribbble.com/shots/767214-Adjust-Controls

index.html

<div id="warp">
  This Css + js Version</br>(work better on chrome & safari)
</br></br>
  <label for="molette">
  <button class="dec button moins" value="">&minus;</button>
    <input id="molette" type="range" name="molette" value="31" >
	<button class="inc button plus">+</button>
	</label>
</br></br><b>NEW</b></br><a target="_blank" href="http://codepen.io/10tribu/full/LotBv">Here</a></br> Pure Css (no-js)
</br>
</br>
</br>
Dribbble version by  <a target="_blank" href="http://dribbble.com/shots/767214-Adjust-Controls">Nikolay Verin</a>
<img style="margin-left:-50px;margin-top:25px;" src="http://dribbble.s3.amazonaws.com/users/4048/screenshots/767214/adjust_controls.png"/></div>

script.js

$(function() {
    $("button").click(function() {
        var $button = $(this);
        var oldValue = $button.parent().find("input#molette").val();
        if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 10;
      } else {
        if (oldValue >= 0) {
            var newVal = parseFloat(oldValue) - 10;
    	  }
    	}
    	$button.parent().find("input").val(newVal);
    });
});

style.css

/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
button,form, fieldset, input, textarea {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {line-height: 1;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
address, caption, cite, code, dfn, em, strong, var { font-style: normal; font-weight: normal;}
caption, th { text-align: left; font-weight: normal; font-style: normal;}
/* starting */
body{
  background-color: #DBD9D2;
  background-image: linear-gradient(top, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: auto 2px;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  -webkit-font-smoothing: subpixel-antialiased;
}
#warp{
  width:296px;
	margin:60px auto 20px;
	display: block;
	position: relative;
  text-align:center;
  text-shadow: 0px 1px 0px rgba(255,255,255,0.55);
}
/* contour metal */
label{
	display:block;
	position: relative;
	width: 296px;
	height: 42px;
	border-radius: 20px;
	background-clip: padding-box;
	box-shadow: 	0 1px 1px rgba(0,0,0,.5),
					inset 0 1px 0px rgba(251,251,251,1);
  background-color:#DBD9D2;
	background-image: linear-gradient(bottom, rgba(204,202,195,.25) 0%, rgba(230,228,224,0.25) 50%, rgba(255,255,255,0.25) 100%);
}
/* insert de la molette */
label:after{
	content: "";
	position: relative;
	top: -16px;
  display:block;
  margin:auto;
	width: 210px;
	height: 27px;
	border-radius: 2px;
	background-clip: padding-box;
	background-color: #55534F;
	z-index: 1;

}

.button{
	font-size: 24px;
  font-weight:100;
	position: relative;
	top: 6px;
	color: #bbb8b4;
	cursor: pointer;
	text-shadow: 0px 1px 0px rgba(255,255,255,0.55);
}
.inc{
	float: right;
	margin-right: 12px;
}
.dec{
	float: left;
	margin-left: 12px;
}
/* Molette */
input[type='range']{
	-webkit-appearance: none;
	width: 208px;
	height: 23px;
  border-radius: 2px;
	position: relative;
	top: 10px;
  margin:auto;
  display:inline-block;
overflow: hidden;
cursor: col-resize;
	box-shadow: 	0 5px 8px rgba(0,0,0,.75),
					inset 0 -3px 0 rgba(0,0,0,.4),
					inset 5px 0px 3px rgba(0,0,0,.25),
					inset -5px 0px 3px rgba(0,0,0,.25),
					inset 0 4px 0 rgba(250,250,250,.75);
	background-image:linear-gradient(left, #5f554b 0%, #756963 2.88%, #cfcdc3 12.45%, #cfcfc5 24.88%, #ebe9e3 49.56%, #c5c5bb 75.34%, #a9afb7 86.45%, #7f838f 97.56%, #3d3f49 100%);
	background-size: auto;
	z-index: 5;

 }
/*  Ombre molette */
 label:before{
	 content: "";
	 display: block;
	 position: absolute;
	 top: -8px;
   left:46px;
	 width: 208px;
	 height: 35px;
	 border-radius:0 0 40% 40%;
	 box-shadow: 	0 28px 8px -2px rgba(0, 0, 0, 0.25),
	 				0 40px 20px 2px rgba(0, 0, 0, 0.105),
	 				0 60px 20px 0px rgba(0, 0, 0, 0.05);
	 z-index: 2;
 }
/*  Marque rouge molette */
input[type='range']::-webkit-slider-thumb{
	-webkit-appearance: none;
	width: 4px;
	height: 23px;
	border-radius: 3px;
	background-clip: padding-box;
	background-color: #bf0000;
	box-shadow: 	inset 0 2px 0 rgba(250,248,244,.65),
					inset 0 -3px 0 rgba(0,0,0,.125);
	border-left: 1px solid rgba(0,0,0,0.75);
 }
/*  crantage molette */
input[type='range']::-webkit-slider-thumb:before{
	content: "";
	width: 416px;
	height: 80px;/* 20px fix chrome bug */
  top:4px;
	margin-left: -208px;
	display: block;
	 position: absolute;
	background-image: linear-gradient(0deg, transparent 25%, rgba(132, 136, 149, .125) 25%, rgba(132, 136, 149, .125) 50%, transparent 50%,transparent 75%, rgba(132, 136, 149, .125) 75%,rgba(132, 136, 149, .125) 100%, transparent 100%);
  
	background-size: 6px auto;
}
/* fake 3d fx */
input[type='range']:after{
content: "";
	width: 208px;
	height: 23px;
	top: 0px;
	display: block;
	 position: absolute;
	 background: linear-gradient(left, rgba(0,0,0,0.55) 0%, rgba(50,50,50,0.25) 5%, rgba(255,255,255,0) 10%, rgba(255,255,255,0) 50%,  rgba(255,255,255,0)  90%, rgba(50,50,50,0.25) 95%, rgba(0,0,0,0.55) 100%);
	background-size: auto;
	 z-index: 10;
}