Range Slider

Range slider component is used for the selection of numeric ranges.

Basic Usage

To start using range slider we need to set v-model and max prop that represents maximum value of range slider. If minimal value of slider is needed to adjust use min prop by setting value lower than max value. Step increment can be adjusted by passing number to step prop.

<template>
  <ci-range-slider
    v-model="currentValue"
    :max="200"
  />
</template>

<script>
export default {
  data() {
    return {
      currentValue: [100,200]
    }
  }
}
</script>

Min/Max values

Range slider supports changing of min and max values. max prop represents maximum value of range slider. If minimal value of slider is needed to adjust use min prop by setting value lower than max value.

<template>
  <ci-range-slider
    v-model="currentValue"
    :min="100"
    :max="200"
  />
</template>

<script>
export default {
  data() {
    return {
      currentValue: [110,160]
    }
  }
}
</script>

Steps

In range slider step represents value that is used to increment/reduce by on sliding. If it is needed to adjust use step prop and set positive value.

<template>
  <ci-range-slider
    v-model="currentValue"
    :step="10"
    :max="200"
  />
</template>

<script>
export default {
  data() {
    return {
      currentValue: [30,100]
    }
  }
}
</script>

Labels

Range slider by default has no labels under slider, but they can be added by setting labeled prop to true. Also labels support prefixes and suffixes. To pass suffix to label use labelSuffix prop. To pass prefix use labelPrefix prop.

<template>
  <DemoGrid layout="vertical">
    <ci-range-slider
      v-model="currentValueTwo"
      labeled
      tooltipDisabled
      :max="200"
    />
    <ci-range-slider
      v-model="suffixSliderValue"
      labeled
      labelSuffix="%"
      :max="200000"
    />
    <ci-range-slider
      v-model="prefixSliderValue"
      labeled
      labelPrefix="$"
      :max="200"
    />
  </DemoGrid>
</template>

<script>
export default {
  data() {
    return {
      suffixSliderValue: [1,10000],
      prefixSliderValue: [12,20],
      currentValueTwo: [100,200]
    }
  }
}
</script>

Disabled

To disable range slider use disabled prop.

<template>
  <ci-range-slider
    v-model="currentValue"
    labeled
    disabled
    :max="200"
  />
</template>

<script>
export default {
  data() {
    return {
      currentValue: [1,12]
    }
  }
}
</script>

Full Width

To set range slider full width use fullwidth prop. By default slider is 300px wide.

<template>
  <ci-range-slider
    v-model="currentValue"
    labeled
    fullwidth
    :max="100"
  />
</template>

<script>
export default {
  data() {
    return {
      currentValue: [10,20]
    }
  }
}
</script>

Tooltip

By default range slider has tooltips on hover, to disable them use tooltipDisabled prop.

<template>
  <ci-range-slider
    v-model="currentValue"
    tooltipDisabled
    :max="100"
    fullwidth
  />
</template>

<script>
export default {
  data() {
    return {
      currentValue: [10,20]
    }
  }
}
</script>