input type range styling

Question

I create a slider with two handlers,to achieve that I put one input type range over the other, the slider works fine but there is a strange line over it and I cant figure what is it:

HTML:

<section  data-range-slider 
          class="range-slider" 
          ng-model="range" 
          min="0" 
          max="max">
<input list="numbers" type="range" ng-change="_which = 0" ng-model="_model[0]" min="0" max="1800" step="1" >
<input type="range" ng-change="_which = 1" ng-model="_model[1]" min="0" max="1800" step="1">
</section>

SASS:

  section.range-slider
    overflow: hidden
    position: relative
    width: 200px
    height: 35px
    input
      pointer-events: none
      position: absolute
      overflow: hidden
      left: 0
      top: 0
      width: 200px
      outline: none
      height: 18px
      &::-webkit-slider-thumb
        pointer-events: all
        position: relative
        z-index: 1
        outline: 0
      &::-moz-range-thumb
        pointer-events: all
        position: relative
        z-index: 10
        -moz-appearance: none
        background: linear-gradient(to bottom, #ededed 0%, #dedede 100%)
        width: 11px
      &::-moz-range-track
        position: relative
        z-index: -1
        background-color: rgba(0, 0, 0, 0.15)
        border: 0
      &:last-of-type::-moz-range-track
        -moz-appearance: none
        background: none transparent
        border: 0

  ul.from-to
    display: block
    list-style-type: none
    margin-top: 10px
    font-family: Arial, Tahoma, Verdana, Arial, Helvetica, sans-serif
    font-size: 11px
    li
      margin-bottom: 1px
      label
        background-color: rgba(0, 0, 0, 0)
        height: 24px
        line-height: 24px
        display: inline-block
        width: 60px
        padding: 0 10px
        float: left
        font-size: 9px
        color: rgba(0, 0, 0, 0)
        text-transform: uppercase
      input
        border: 1px solid rgba(0, 0, 0, 0.1)
        padding: 0 8px
        height: 24px
        line-height: 24px
        outline: none

Is this line a pseudoelement or something from input type="range" element? How can I remove it?

Answer 1

Add this to input to overwrite default browser styles:

&::focus
    outline: none
    -moz-box-shadow: none
    -webkit-box-shadow: none
    box-shadow: none