A slider knob - http://jsfiddle.net/geSVR/

knob.css

.knob {
  width: 40px;
  height: 40px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  position: relative;
  background-color: #F6F4F4;
  background-color: #f2f0f0;
  background-image: -moz-linear-gradient(top, #f6f4f4, #edebeb);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f4f4), to(#edebeb));
  background-image: -webkit-linear-gradient(top, #f6f4f4, #edebeb);
  background-image: -o-linear-gradient(top, #f6f4f4, #edebeb);
  background-image: linear-gradient(to bottom, #f6f4f4, #edebeb);
  background-repeat: repeat-x;
  -webkit-box-shadow: 0px 1px 4px #666666;
  -moz-box-shadow: 0px 1px 4px #666666;
  box-shadow: 0px 1px 4px #666666;
}
.knob:after {
  content: "";
  width: 28px;
  height: 28px;
  display: block;
  position: relative;
  top: 6px;
  left: 6px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
  -webkit-box-shadow: 0px 1px 5px -2px #bbbbbb inset;
  -moz-box-shadow: 0px 1px 5px -2px #bbbbbb inset;
  box-shadow: 0px 1px 5px -2px #bbbbbb inset;
  background-color: #eaeaea;
  background-image: -moz-linear-gradient(top, #dddddd, #fefefe);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dddddd), to(#fefefe));
  background-image: -webkit-linear-gradient(top, #dddddd, #fefefe);
  background-image: -o-linear-gradient(top, #dddddd, #fefefe);
  background-image: linear-gradient(to bottom, #dddddd, #fefefe);
  background-repeat: repeat-x;
}