fixed-vuesax/dist/style/components/vsSlider.styl

Framework Components for Vue js

.con-vs-slider
  width: 100%;
  position: relative
  left 0;
  margin: 16px 0
  display: block
  min-width 300px;
  z-index 100

  &.disabledx
    opacity .4;
    cursor default

    button
      cursor default !important
      pointer-events: none

.vs-slider
  width: 100%;
  height 4px;
  border-radius: 4px;
  background: rgb(240, 240, 240)
  position relative
  cursor pointer
  border: 0;
  margin: 0;
  display: block
  overflow hidden

.vs-slider-line-one
  width: 20px;
  height 100%;
  top: 0;
  position absolute
  left 0;
  z-index 1

  &.hasTransition
    transition: all .2s ease

.vs-slider-line-effect
  width: 0;
  height 100%;
  top: 0;
  position absolute
  left 0;
  transition: opacity .3s ease, width .3s ease
  transform: translate(-50%)

  &:not(.run-effect)
    opacity 0 !important
    width: 0 !important;

  &.run-effect
    width: 100%;
    animation: example .3s ease
    animation-iteration-count: 1

.vs-slider--tick
  position absolute
  left 100px;
  background: rgb(210, 210, 210)
  width: 4px;
  height 100%;
  top: 0;

  &.isEnd
    transform: translate(-100%)

.vs-slider--circles
  transform: translate(-50%)
  transition: border .2s ease, transform .2s ease, border-radius .2s ease
  display block
  background: rgb(255, 255, 255)

  &:active
    border-width: 7px !important

  &.isEquals
    &.vs-circle-slider-two
      border-radius: 50% 50% 0 0
      transform: translate(-50%, -7px) scale(.9) !important

    &.vs-circle-slider
      border-radius: 0 0 50% 50%
      transform: translate(-50%, 6px) scale(.9) !important

  &.changeValue
    &:active
      border-width: 6px !important

      .text-circle-slider
        transform translate(-50%, calc(-100% + -19px)) !important

  &.isEndValue
    border-radius: 50% 0 0 50% !important

  &:hover:not(:active)
    transform scale(1.2) translate(-50%)

  &:active
    .text-circle-slider
      opacity 1
      transform: translate(-50%, calc(-100% + -13px)) scale(1) rotate(0deg)
      visibility visible


// &:active
//   .text-circle-slider
//     transform: translate(-50%,calc(-100% + -15px)) scale(1) rotate(0deg)
.vs-slider--circle-text
  color: rgb(255, 255, 255)
  position: absolute
  padding: 2px 5px;
  border-radius: 5px;
  transform: translate(-50%, -20%) scale(.3)
  top: 0;
  left 50%;
  font-size: .75rem
  opacity 0;
  visibility hidden
  transition: all .2s ease
  display: flex
  align-items: center
  justify-content: center
  z-index 1000

  span
    margin-left: 2px;

  i
    font-size: .8rem
    margin-left: 2px

  &:after
    content: ''
    width: 6px;
    height 6px;
    display: block
    position: absolute
    background: inherit
    left 50%;
    bottom: -3px;
    transform: translate(-50%) rotate(45deg)


.vs-slider--circle
  width: 16px;
  height 16px;
  position: absolute
  top: -6px;
  border-radius: 50%;
  cursor pointer
  border: 0;
  margin: 0;
  z-index 200

  &.hasTransition
    transition: all .2s ease

.vs-slider--circle-two
  z-index 100;
  width: 16px;
  height 16px;
  position: absolute
  top: -6px;
  border-radius: 50%;
  cursor pointer
  border: 0;
  margin: 0;
  color rgb(255, 255, 255)

  &.hasTransition
    transition: all .2s ease

@keyframes example
  0%
    opacity 1
  100%
    opacity 0


for colorx, i in $vs-colors
  .vs-slider-{colorx}

    .vs-slider-line-one
      background: getColor(colorx, 1)

    .vs-circles-slider
      border: 2px solid getColor(colorx, 1)

    .text-circle-slider
      background: getColor(colorx, 1)

    .vs-slider-line-effect
      background: getColor(colorx, 1)