<template>
<div>
<Head>
<Title>Vue Slider Component</Title>
<Meta name="description" content="Slider is a component to provide input with a drag handle." />
</Head>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Slider</h1>
<p>Slider is an input component to provide a numerical input.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic: {{ value1 }}</h5>
<Slider v-model="value1" />
<h5>Input: {{ value2 }}</h5>
<InputText v-model.number="value2" />
<Slider v-model="value2" />
<h5>Step: {{ value3 }}</h5>
<Slider v-model="value3" :step="20" />
<h5>Decimal Step: {{ value4 }}</h5>
<Slider v-model="value4" :step="0.5" />
<h5>Range: {{ value5 }}</h5>
<Slider v-model="value5" :range="true" />
<h5>Vertical: {{ value6 }}</h5>
<Slider v-model="value6" orientation="vertical" />
</div>
</div>
<SliderDoc />
</div>
</template>
<script>
import SliderDoc from './SliderDoc';
export default {
data() {
return {
value1: null,
value2: 50,
value3: 20,
value4: 30.5,
value5: [20, 80],
value6: 50
};
},
components: {
SliderDoc: SliderDoc
}
};
</script>
<style scoped>
.p-slider-horizontal,
.p-inputtext {
width: 14rem;
}
.p-slider-vertical {
height: 14rem;
}
</style>