Tu View PlusSlider
Sliding input device, showing current value and selectable range.
Basic usage
Basic usage of sliding input bar.
<template>
<tu-slider v-model="sliderValue" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script><template>
<tu-slider v-model="sliderValue" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script>Disabled
Disable the slider.
<template>
<tu-slider v-model="sliderValue" disabled />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script><template>
<tu-slider v-model="sliderValue" disabled />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script>Step
Set the step size by step, the default step size is 1. It is recommended to set a value that can be divisible by max-min, otherwise, the optional maximum value will be less than max. When show-ticks is set, the step ticks are displayed.
Step is 10
Step is 20
Step is 20 and show ticks
<template>
<p>Step is 10</p>
<tu-slider v-model="sliderValue1" :step="10" />
<p>Step is 20</p>
<tu-slider v-model="sliderValue2" :step="20" />
<p>Step is 20 and show ticks</p>
<tu-slider v-model="sliderValue3" :step="20" :show-ticks="true" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue1 = ref(20);
const sliderValue2 = ref(20);
const sliderValue3 = ref(20);
</script><template>
<p>Step is 10</p>
<tu-slider v-model="sliderValue1" :step="10" />
<p>Step is 20</p>
<tu-slider v-model="sliderValue2" :step="20" />
<p>Step is 20 and show ticks</p>
<tu-slider v-model="sliderValue3" :step="20" :show-ticks="true" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue1 = ref(20);
const sliderValue2 = ref(20);
const sliderValue3 = ref(20);
</script>Marks
You can add text labels by setting marks.
0km
5km
10km
15km
<template>
<tu-slider class="mb-4" v-model="sliderValue" :max="15" :marks="marks" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(5);
const marks = {
0: '0km',
5: '5km',
10: '10km',
15: '15km'
};
</script><template>
<tu-slider class="mb-4" v-model="sliderValue" :max="15" :marks="marks" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(5);
const marks = {
0: '0km',
5: '5km',
10: '10km',
15: '15km'
};
</script>Range slider
Range selection can be turned on by setting range, at this time modelValue is an array.
<template>
<tu-slider v-model="value" range />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref([10, 20]);
</script><template>
<tu-slider v-model="value" range />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const value = ref([10, 20]);
</script>Show input
When show-input is set, the input will be displayed.
<template>
<tu-slider class="mb-2" :default-value="10" show-input />
<tu-slider v-model="sliderValue" range show-input />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref([0, 10]);
</script><template>
<tu-slider class="mb-2" :default-value="10" show-input />
<tu-slider v-model="sliderValue" range show-input />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref([0, 10]);
</script>Vertical slider
Set direction is vertical and a vertical slider will be displayed.
5km
10km
<template>
<tu-slider class="mr-2" v-model="sliderValue1" direction="vertical" />
<tu-slider
class="mr-2"
v-model="sliderValue2"
:show-ticks="true"
:step="20"
direction="vertical"
/>
<tu-slider
direction="vertical"
v-model="sliderValue3"
:max="15"
:marks="marks"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue1 = ref(20);
const sliderValue2 = ref(20);
const sliderValue3 = ref(3);
const marks = {
5: '5km',
10: '10km'
};
</script><template>
<tu-slider class="mr-2" v-model="sliderValue1" direction="vertical" />
<tu-slider
class="mr-2"
v-model="sliderValue2"
:show-ticks="true"
:step="20"
direction="vertical"
/>
<tu-slider
direction="vertical"
v-model="sliderValue3"
:max="15"
:marks="marks"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue1 = ref(20);
const sliderValue2 = ref(20);
const sliderValue3 = ref(3);
const marks = {
5: '5km',
10: '10km'
};
</script>Custom tooltip
You can customize the prompt text by setting format-tooltip.
<template>
<tu-slider
:min="0"
:max="100"
v-model="sliderValue"
:format-tooltip="fromatter"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
const fromatter = (value: number): string => {
return `${Math.round((value / 50) * 100)}°`;
};
</script><template>
<tu-slider
:min="0"
:max="100"
v-model="sliderValue"
:format-tooltip="fromatter"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
const fromatter = (value: number): string => {
return `${Math.round((value / 50) * 100)}°`;
};
</script>Sizes
Besides default size, tu-slider component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.
<template>
<tu-slider class="mb-2" v-model="sliderValue" size="mini" />
<tu-slider class="mb-2" v-model="sliderValue" size="small" />
<tu-slider class="mb-2" v-model="sliderValue" />
<tu-slider v-model="sliderValue" size="large" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script><template>
<tu-slider class="mb-2" v-model="sliderValue" size="mini" />
<tu-slider class="mb-2" v-model="sliderValue" size="small" />
<tu-slider class="mb-2" v-model="sliderValue" />
<tu-slider v-model="sliderValue" size="large" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const sliderValue = ref(20);
</script>Slider API
Slider Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| v-model | Binding value | Number Array | - |
| default-value | Default value (uncontrolled state)） | Number Array | 0 |
| step | Sliding step | Number | 1 |
| min | Minimum sliding range | Number | 0 |
| max | Maximum sliding range | Number | - |
| marks | Set the displayed label | Object | - |
| direction | The direction of the slider | String | horizontal |
| disabled | Whether Slider is disabled | Boolean | false |
| show-ticks | Whether Slider is to show ticks | Boolean | false |
| show-input | Whether Slider is to show input | Boolean | false |
| range | Whether Slider is to use range selection | Boolean | false |
| show-tooltip | Whether Slider is to show tooltip | Boolean | true |
Slider Events
| Name | Description | Type |
|---|---|---|
| change | Trigger when the value changes | Function |