Customize +/- slider

[Trond Hoyem]

This means that there's some other CSS rule with higher priority that over-rides your rule.
You can use !important rule to fix this:

Code:

.control-spinner .btn {
  background-color: #f90;
  background-image: none;
  border-color: #000;
  border-radius: 0 !important;
}

OK, so I have been able to make some modifications to the slider, and it is now looking the way I want it.

But there is a prblem; When I drag the handle from top to bottom, it stops at about 20%. If I then click on the slider below the handle, it moves to that positopn. I am also able to drag the handle to above the slider by a few pixels.

I have tried to play around with the parameters, but I am stuck at the same behavior. Any idea where I have something wrong?
The CSS code I have now is:

 

Code:

.usermode .slider-alt .slider-v .slider,
.slider-alt .slider-v .slider .progress {
  height: 350px;
  width: 5px;
  padding: 30px;
}


.slider-alt .slider-v .slider .progress {
  position: static;
  padding: 0;
  color: #f00;
  border-color: #000;
  border-radius:0 !important;
}
.slider-alt .slider-v .slider {
  padding: 0 13px;
}


.slider-alt .slider-v .btn {
  left: 0px;

  border-radius: 0 !important;
  width: 61px !important;
  background-color: rgb(228, 228, 228) !important;
  border-color: #000;
  height: 22px;
 
}
.slider-alt .slider-v .slider .slider-handle:before {
  width: 4px;
  top: 27px !important;
  left: 9px;
  height: 300px;
  color: #f00;
}



.slider-alt .slider-max {
Display: none;
}

.slider-alt .slider-min {
Display: none;
}