.mod-example
  .slider
    .header
      .title Vestibulum
      .value $100
    .bar
      .range style='width: 50%;'
      .handler style='left: 50%;'

.mod-example
  .slider.disabled
    .header
      .title Vestibulum
      .value $100
    .bar
      .range style='width: 50%;'
      .handler style='left: 50%;'

.mod-example
  .slider
    .header
      .title Vestibulum
      .value $100
    .bar
      .range style='width: 50%;'
      .disabled style='width: 20%;'
      .handler style='left: 50%;'

.mod-example
  .slider.tall
    .value.black
      span $100
      small.value-small
        '  /sit
    .bar
      .range style='width: 50%;'
      .handler style='left: 50%;'
      .average style='left: 50%;'
        .average-circle
        .average-tooltip
          span.average-text Average
      .value.current style='left: 50%;'
        span $1,000
        small.value-small.semibold
          '  /sit
    .value.black
      span $1,000
      small.value-small
        '  /sit