.slider {
   margin-top: 7px;
   min-width:200px;
    width: 96%;
}


.slider > .dragger {
 	background: url("images/wheel.png") -2px 0px no-repeat;
 	background-size:100% 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;

margin-left:-12px !important;	 
  width: 30px;
  height: 30px;
}

.slider > .dragger:hover {
  /* background: -webkit-linear-gradient(top, #8DCA09, #8DCA09); */
}
.slider:hover > .dragger{
 display:block;
 -webkit-transition: display 0.2s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: display 0.2s ease-in-out, box-shadow 0.1s linear;
	-o-transition: display 0.2s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: display 0.2s ease-in-out, box-shadow 0.1s linear;
	transition: display 0.2s ease-in-out, box-shadow 0.1s linear;
}
input:hover ~ .slider >.dragger{
 display: block;
}

.slider > .track, .slider > .highlight-track {
  background: #ccc;
  background: -webkit-linear-gradient(top, #bbb, #ddd);
  background: -moz-linear-gradient(top, #bbb, #ddd);
  background: linear-gradient(top, #bbb, #ddd);

  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

  border: 1px solid #aaa;
  height: 4px;
}

.slider > .highlight-track {
	background-color: #8DCA09;
	background: -webkit-linear-gradient(top, #8DCA09, #72A307);
	background: -moz-linear-gradient(top, #8DCA09, #72A307);
	background: linear-gradient(top, #8DCA09, #72A307);
	
	border-color: #496805;
}