quasar-framework/src/components/slider/slider.ios.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

$slider-height              = 32px
$slider-track-height        = 2px
$slider-mark-height         = 10px
$slider-handle-size         = 22px
$slider-label-transform     = translateX(-50%) translateY(-139%) scale(1)

.q-slider-track, .q-slider-mark
  opacity .4
  background currentColor

.q-slider-track
  position absolute
  top 50%
  left 0
  transform translateY(-50%)
  height $slider-track-height
  width 100%
  &:not(.dragging)
    transition all .3s ease
  &.active-track
    opacity 1
  &.track-draggable.dragging
    height ($slider-track-height * 2)
    transition height .3s ease
  &.handle-at-minimum
    background transparent

.q-slider-mark
  position absolute
  top 50%
  height $slider-mark-height
  width 2px
  transform translateX(-50%) translateY(-50%)

.q-slider-handle-container
  position relative
  height 100%
  margin-left ($slider-handle-size / 2)
  margin-right ($slider-handle-size / 2)

.q-slider-label
  top 0
  left ($slider-handle-size / 2)
  opacity 0
  transform translateX(-50%) translateY(0) scale(0)
  transition all .2s
  padding 2px 4px
  &.label-always
    opacity 1
    transform $slider-label-transform

.q-slider-handle
  position absolute
  top 50%
  transform translate3d(-50%, -50%, 0)
  transform-origin center
  transition all .3s ease
  width $slider-handle-size
  height $slider-handle-size
  background white
  box-shadow $shadow-3
  .q-chip
    max-width unset
  &.dragging
    transform translate3d(-50%, -50%, 0)
    transition opacity .3s ease, transform .3s ease
    .q-slider-label
      opacity 1
      transform $slider-label-transform

.q-slider-ring
  position absolute
  top -50%
  left -50%
  width 200%
  height 200%
  border-radius inherit
  pointer-events none
  opacity 0
  transform scale(0)
  transition all .2s ease-in
  background currentColor

.q-slider:not(.disabled):not(.readonly)
  .q-slider-handle.dragging, .q-slider-handle:focus, body.desktop &:hover
    .q-slider-ring
      opacity .4
      transform scale(1)

.q-slider.disabled
  .q-slider-handle
    border 2px solid white
  .q-slider-handle.handle-at-minimum
    background currentColor

.q-slider
  height $slider-height
  width 100%
  color $primary
  color var(--q-color-primary)
  cursor pointer

  &.label-always, &.with-padding
    padding 30px 0 4px
    height 56px

  &.has-error
    color $negative
    color var(--q-color-negative)
  &.has-warning
    color $warning
    color var(--q-color-warning)