quasar/src/components/slider/QSlider.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

.q-slider
  position: relative
  width: 100%
  height: 40px
  color: $primary
  color: var(--q-color-primary)
  outline: 0

  &__track-container
    top: 50%
    margin-top: -1px
    width: 100%
    height: 2px
    background: rgba(0,0,0,.26)

  &__track
    will-change: width, left
    background: currentColor
    top: 0
    bottom: 0

  &__track-markers
    color: #000
    background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, transparent 0, transparent)

    &:after
      content: ''
      position: absolute
      right: 0
      top: 0
      bottom: 0
      height: 2px
      width: 2px
      background: currentColor

  &__thumb-container
    top: 50%
    margin-top: -10px
    width: 20px
    height: 20px
    transform: translateX(-10px) /* rtl:ignore */
    will-change: left
    outline: 0

  &__thumb
    top: 0
    left: 0
    transform: scale(1)
    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
    stroke-width: 3.5
    stroke: currentColor

    path
      stroke: currentColor
      fill: currentColor

  &__focus-ring
    width: 20px
    height: 20px
    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
    border-radius: 50%
    opacity: 0
    transition-delay: .14s

  &__arrow
    position: absolute
    top: 20px
    left: 4px
    width: 0
    height: 0
    border-left: 6px solid transparent
    border-right: 6px solid transparent
    border-top: 6px solid currentColor
    transform-origin: 50% 50%
    transform: scale(0) translateY(0)
    transition: transform 100ms ease-out

  &__pin
    top: 0
    right: 0
    margin-top: -4px
    transform: scale(0) translateY(0)
    transition: transform 100ms ease-out
    will-change: left
    z-index: 1
    white-space: nowrap

    &-text-container
      min-height: 25px
      padding: 2px 8px
      border-radius: $generic-border-radius
      background: currentColor
      position: relative
      right: -50%
      text-align: center

    &-text
      color: #fff
      font-size: 12px

  &--editable
    cursor: grab

  &--no-value
    .q-slider__thumb, .q-slider__track
      visibility: hidden

  &--focus
    .q-slider__thumb
      transform: scale(1)

  &--focus, body.desktop &.q-slider--editable:hover
    .q-slider__focus-ring
      background: currentColor
      transform: scale3d(1.55, 1.55, 1)
      opacity: .25
    .q-slider__thumb, .q-slider__track
      visibility: visible

  &--inactive
    .q-slider__thumb-container
      transition: left .28s, right .28s
    .q-slider__track
      transition: width .28s, left .28s, right .28s

  &--active
    cursor: grabbing

    .q-slider__thumb
      transform: scale(1.5)

    .q-slider__focus-ring, &.q-slider--label .q-slider__thumb
      transform: scale(0) !important

  body.desktop &.q-slider--editable:hover
    .q-slider__pin,
    .q-slider__arrow
      transform: scale(1) translateY(-25px)

  &--label
    &.q-slider--active, .q-slider--focus, &.q-slider--label-always
      .q-slider__pin,
      .q-slider__arrow
        transform: scale(1) translateY(-25px)

  &--dark
    .q-slider__track-container
      background: rgba(#fff, .3)
    .q-slider__track-markers
      color: #fff

  &--reversed
    .q-slider__thumb-container
      transform: translateX(10px) /* rtl:ignore */

  &--dense
    height: 20px