github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/forms/_range.scss (about)

     1  /* Range
     2     ========================================================================== */
     3  
     4  .range-field {
     5    position: relative;
     6  }
     7  
     8  input[type=range],
     9  input[type=range] + .thumb {
    10    @extend .no-select;
    11    cursor: pointer;
    12  }
    13  
    14  input[type=range] {
    15    position: relative;
    16    background-color: transparent;
    17    border: none;
    18    outline: none;
    19    width: 100%;
    20    margin: 15px 0;
    21    padding: 0;
    22  
    23    &:focus {
    24      outline: none;
    25    }
    26  }
    27  
    28  input[type=range] + .thumb {
    29    position: absolute;
    30    top: 10px;
    31    left: 0;
    32    border: none;
    33    height: 0;
    34    width: 0;
    35    border-radius: 50%;
    36    background-color: $radio-fill-color;
    37    margin-left: 7px;
    38  
    39    transform-origin: 50% 50%;
    40    transform: rotate(-45deg);
    41  
    42    .value {
    43      display: block;
    44      width: 30px;
    45      text-align: center;
    46      color: $radio-fill-color;
    47      font-size: 0;
    48      transform: rotate(45deg);
    49    }
    50  
    51    &.active {
    52      border-radius: 50% 50% 50% 0;
    53  
    54      .value {
    55        color: $input-background;
    56        margin-left: -1px;
    57        margin-top: 8px;
    58        font-size: 10px;
    59      }
    60    }
    61  }
    62  
    63  // WebKit
    64  input[type=range] {
    65    -webkit-appearance: none;
    66  }
    67  
    68  input[type=range]::-webkit-slider-runnable-track {
    69    height: $track-height;
    70    background: #c2c0c2;
    71    border: none;
    72  }
    73  
    74  input[type=range]::-webkit-slider-thumb {
    75    -webkit-appearance: none;
    76    border: none;
    77    height: $range-height;
    78    width: $range-width;
    79    border-radius: 50%;
    80    background-color: $radio-fill-color;
    81    transform-origin: 50% 50%;
    82    margin: -5px 0 0 0;
    83    transition: .3s;
    84  }
    85  
    86  input[type=range]:focus::-webkit-slider-runnable-track {
    87    background: #ccc;
    88  }
    89  
    90  // FireFox
    91  input[type=range] {
    92    /* fix for FF unable to apply focus style bug  */
    93    border: 1px solid white;
    94  
    95    /*required for proper track sizing in FF*/
    96  }
    97  
    98  input[type=range]::-moz-range-track {
    99    height: $track-height;
   100    background: #ddd;
   101    border: none;
   102  }
   103  
   104  input[type=range]::-moz-range-thumb {
   105    border: none;
   106    height: $range-height;
   107    width: $range-width;
   108    border-radius: 50%;
   109    background: $radio-fill-color;
   110    margin-top: -5px;
   111  }
   112  
   113  // hide the outline behind the border
   114  input[type=range]:-moz-focusring {
   115    outline: 1px solid #fff;
   116    outline-offset: -1px;
   117  }
   118  
   119  input[type=range]:focus::-moz-range-track {
   120    background: #ccc;
   121  }
   122  
   123  // IE 10+
   124  input[type=range]::-ms-track {
   125    height: $track-height;
   126  
   127    // remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead
   128    background: transparent;
   129  
   130    // leave room for the larger thumb to overflow with a transparent border */
   131    border-color: transparent;
   132    border-width: 6px 0;
   133  
   134    /*remove default tick marks*/
   135    color: transparent;
   136  }
   137  
   138  input[type=range]::-ms-fill-lower {
   139    background: #777;
   140  }
   141  
   142  input[type=range]::-ms-fill-upper {
   143    background: #ddd;
   144  }
   145  
   146  input[type=range]::-ms-thumb {
   147    border: none;
   148    height: $range-height;
   149    width: $range-width;
   150    border-radius: 50%;
   151    background: $radio-fill-color;
   152  }
   153  
   154  input[type=range]:focus::-ms-fill-lower {
   155    background: #888;
   156  }
   157  
   158  input[type=range]:focus::-ms-fill-upper {
   159    background: #ccc;
   160  }