1

I've got a weird situation. I'm using AngularJS to dynamically set the position of a range slider based on the current position in the video. If I style just the thumb (by enabling the bottom two calls below) the thumb moves along the slider in real time as expected. If I style the input[type="range"] as in the first section below, the thumb doesn't move dynamically unless you mouse over it.

I have tried other CSS styles of range inputs that I pulled from various websites, and I experience the same outcome each time. This seems to affect only Chrome. The weirdest thing is that IE works just fine (who would have thought?!) with the styled slider and the thumb moves along nicely.

input[type="range"] //::-moz-range-track //::-ms-track
{
    outline:none;
    background: rgb(127, 183, 219);
    width: 130px;
    height: 6px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -wekkit-border-radius: 8px;
}

input[type="range"]::-webkit-slider-thumb// ::-moz-range-thumb ::-ms-thumb
{
    outline:none;
    -webkit-appearance:none !important;  
    width:20px;
    height:20px;
    -webkit-appearance: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -wekkit-border-radius: 10px;
    border:1px solid rgba(127, 183, 219, 1.0);

    background: #FFF;

    -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
    -moz-box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
    box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);

 }

input[type="range"] ::-webkit-slider-thumb:hover// ::-moz-range-thumb:hover ::-ms-thumb:hover
{
    outline:none;
    -webkit-appearance:none !important;  
    width:22px;
    height:22px;
    -webkit-appearance: none;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -wekkit-border-radius: 10px;
    border: 1px solid rgba(127, 183, 219, 1.0);

    background: #FFF;

    -webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
    -moz-box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
    box-shadow:  0px 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(255, 255, 255, 0.05);
 }
sandworm
  • 11
  • 2
  • EDIT: I narrowed it down to -webkit-appearance: none. If this line is in the CSS, the styles work but the slider won't update dynamically. In my case, I'm trying to make it display a user's current position in a video. – sandworm Jul 16 '14 at 19:55
  • This thread is in the same area: http://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging –  Dec 05 '14 at 19:51

0 Answers0