_slider.scss 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. $thumb-height: 15px;
  2. input[type="range"] {
  3. margin: auto;
  4. -webkit-appearance: none;
  5. position: relative;
  6. overflow: hidden;
  7. height: $thumb-height;
  8. width: 50%;
  9. cursor: pointer;
  10. border-radius: 0; /* iOS */
  11. }
  12. ::-webkit-slider-runnable-track {
  13. background: #ddd;
  14. }
  15. /*
  16. * 1. Set to 0 height and width, and remove border for a slider without a thumb
  17. */
  18. ::-webkit-slider-thumb {
  19. -webkit-appearance: none;
  20. width: 20px; /* 1 */
  21. height: $thumb-height; /* 1 */
  22. background: #fff;
  23. box-shadow: -100vw 0 0 100vw dodgerblue;
  24. border: 0px solid #999; /* 1 */
  25. }
  26. ::-moz-range-track {
  27. height: $thumb-height;
  28. background: #ddd;
  29. }
  30. ::-moz-range-thumb {
  31. background: #fff;
  32. height: $thumb-height;
  33. width: 20px;
  34. border: 0px solid #999;
  35. border-radius: 0 !important;
  36. box-shadow: -100vw 0 0 100vw dodgerblue;
  37. box-sizing: border-box;
  38. }
  39. ::-ms-fill-lower {
  40. background: dodgerblue;
  41. }
  42. ::-ms-thumb {
  43. background: #fff;
  44. border: 0px solid #999;
  45. height: $thumb-height;
  46. width: 20px;
  47. box-sizing: border-box;
  48. }
  49. ::-ms-ticks-after {
  50. display: none;
  51. }
  52. ::-ms-ticks-before {
  53. display: none;
  54. }
  55. ::-ms-track {
  56. background: #ddd;
  57. color: transparent;
  58. height: $thumb-height;
  59. border: none;
  60. }
  61. ::-ms-tooltip {
  62. display: none;
  63. }