433 lines
13 KiB
Vue
Executable File
433 lines
13 KiB
Vue
Executable File
<template>
|
|
<AppDoc name="SliderDemo" :sources="sources" github="slider/SliderDemo.vue">
|
|
<h5>Import via Module</h5>
|
|
<pre v-code.script><code>
|
|
import Slider from 'primevue/slider';
|
|
|
|
</code></pre>
|
|
|
|
<h5>Import via CDN</h5>
|
|
<pre v-code><code>
|
|
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
|
|
<script src="https://unpkg.com/primevue@^3/slider/slider.min.js"></script>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Getting Started</h5>
|
|
<p>Two-way binding is defined using the standard v-model directive.</p>
|
|
<pre v-code><code>
|
|
<Slider v-model="value" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Range</h5>
|
|
<p>Range slider provides two handles to define two values. Enable <i>range</i> property and bind an array to implement a range slider.</p>
|
|
|
|
<pre v-code><code>
|
|
<Slider v-model="value" :range="true" />
|
|
|
|
</code></pre>
|
|
|
|
<pre v-code.script><code>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value: [20,80]
|
|
}
|
|
}
|
|
}
|
|
|
|
</code></pre>
|
|
|
|
<h5>Orientation</h5>
|
|
<p>Default layout of slider is horizontal, use <i>orientation</i> property for the alternative vertical mode.</p>
|
|
<pre v-code><code>
|
|
<Slider v-model="value" orientation="vertical" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Step</h5>
|
|
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
|
|
<pre v-code><code>
|
|
<Slider v-model="value" :step="20" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Min-Max</h5>
|
|
<p>Boundaries are specified with min and max attributes.</p>
|
|
<pre v-code><code>
|
|
<Slider v-model="value" :step="20" :min="50" :max="200" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Properties</h5>
|
|
<p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>modelValue</td>
|
|
<td>number</td>
|
|
<td>0</td>
|
|
<td>Value of the component.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>min</td>
|
|
<td>number</td>
|
|
<td>0</td>
|
|
<td>Mininum boundary value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>max</td>
|
|
<td>number</td>
|
|
<td>100</td>
|
|
<td>Maximum boundary value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>orientation</td>
|
|
<td>string</td>
|
|
<td>horizontal</td>
|
|
<td>Orientation of the slider, valid values are horizontal and vertical.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>step</td>
|
|
<td>number</td>
|
|
<td>1</td>
|
|
<td>Step factor to increment/decrement the value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>range</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>When speficed, allows two boundary values to be picked.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>disabled</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>When present, it specifies that the component should be disabled.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tabindex</td>
|
|
<td>number</td>
|
|
<td>null</td>
|
|
<td>Index of the element in tabbing order.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>aria-label</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Defines a string value that labels an interactive element.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>aria-labelledby</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Events</h5>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Parameters</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>change</td>
|
|
<td>value: Selected option value</td>
|
|
<td>Callback to invoke on value change.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>slideend</td>
|
|
<td>
|
|
event.originalEvent: Original event <br />
|
|
event.value: New value.
|
|
</td>
|
|
<td>Callback to invoke when slide ends.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Styling</h5>
|
|
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Element</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>p-slider</td>
|
|
<td>Container element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-slider-handle</td>
|
|
<td>Handle element.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Accessibility</h5>
|
|
<h6>Screen Reader</h6>
|
|
<p>
|
|
Slider element component uses <i>slider</i> role on the handle in addition to the <i>aria-orientation</i>, <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined
|
|
using <i>aria-labelledby</i> and <i>aria-label</i> props.
|
|
</p>
|
|
|
|
<pre v-code><code>
|
|
<span id="label_number">Number</span>
|
|
<Slider aria-labelledby="label_number" />
|
|
|
|
<Slider aria-label="Number" />
|
|
|
|
</code></pre>
|
|
|
|
<h6>Keyboard Support</h6>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Key</th>
|
|
<th>Function</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><i>tab</i></td>
|
|
<td>Moves focus to the slider.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="inline-flex flex-column">
|
|
<i class="mb-1">left arrow</i>
|
|
<i>up arrow</i>
|
|
</span>
|
|
</td>
|
|
<td>Decrements the value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<span class="inline-flex flex-column">
|
|
<i class="mb-1">right arrow</i>
|
|
<i>down arrow</i>
|
|
</span>
|
|
</td>
|
|
<td>Increments the value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i>home</i></td>
|
|
<td>Set the minimum value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i>end</i></td>
|
|
<td>Set the maximum value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i>page up</i></td>
|
|
<td>Increments the value by 10 steps.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><i>page down</i></td>
|
|
<td>Decrements the value by 10 steps.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Dependencies</h5>
|
|
<p>None.</p>
|
|
</AppDoc>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
sources: {
|
|
'options-api': {
|
|
tabName: 'Options API Source',
|
|
content: `
|
|
<template>
|
|
<div>
|
|
<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>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value1: null,
|
|
value2: 50,
|
|
value3: 20,
|
|
value4: 30.5,
|
|
value5: [20,80],
|
|
value6: 50
|
|
}
|
|
}
|
|
}
|
|
<\\/script>
|
|
|
|
<style scoped>
|
|
.p-slider-horizontal, .p-inputtext {
|
|
width: 14rem;
|
|
}
|
|
.p-slider-vertical {
|
|
height: 14rem;
|
|
}
|
|
</style>`
|
|
},
|
|
'composition-api': {
|
|
tabName: 'Composition API Source',
|
|
content: `
|
|
<template>
|
|
<div>
|
|
<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>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue';
|
|
|
|
export default {
|
|
setup() {
|
|
const value1 = ref(null);
|
|
const value2 = ref(50);
|
|
const value3 = ref(20);
|
|
const value4 = ref(30.5);
|
|
const value5 = ref([20,80]);
|
|
const value6 = ref(50);
|
|
|
|
return { value1, value2, value3, value4, value5, value6 }
|
|
}
|
|
}
|
|
<\\/script>
|
|
|
|
<style scoped>
|
|
.p-slider-horizontal, .p-inputtext {
|
|
width: 14rem;
|
|
}
|
|
.p-slider-vertical {
|
|
height: 14rem;
|
|
}
|
|
</style>`
|
|
},
|
|
'browser-source': {
|
|
imports: `<script src="https://unpkg.com/primevue@^3/slider/slider.min.js"><\\/script>`,
|
|
tabName: 'Browser Source',
|
|
content: `<div id="app">
|
|
<h5>Basic: {{value1}}</h5>
|
|
<p-slider v-model="value1"></p-slider>
|
|
|
|
<h5>Input: {{value2}}</h5>
|
|
<p-inputtext v-model.number="value2"></p-inputtext>
|
|
<p-slider v-model="value2"></p-slider>
|
|
|
|
<h5>Step: {{value3}}</h5>
|
|
<p-slider v-model="value3" :step="20"></p-slider>
|
|
|
|
<h5>Decimal Step: {{value4}}</h5>
|
|
<p-slider v-model="value4" :step="0.5"></p-slider>
|
|
|
|
<h5>Range: {{value5}}</h5>
|
|
<p-slider v-model="value5" :range="true"></p-slider>
|
|
|
|
<h5>Vertical: {{value6}}</h5>
|
|
<p-slider v-model="value6" orientation="vertical"></p-slider>
|
|
</div>
|
|
|
|
<script type="module">
|
|
const { createApp, ref } = Vue;
|
|
|
|
const App = {
|
|
setup() {
|
|
const value1 = ref(null);
|
|
const value2 = ref(50);
|
|
const value3 = ref(20);
|
|
const value4 = ref(30.5);
|
|
const value5 = ref([20,80]);
|
|
const value6 = ref(50);
|
|
|
|
return { value1, value2, value3, value4, value5, value6 }
|
|
},
|
|
components: {
|
|
"p-slider": primevue.slider,
|
|
"p-inputtext": primevue.inputtext
|
|
}
|
|
};
|
|
|
|
createApp(App)
|
|
.use(primevue.config.default)
|
|
.mount("#app");
|
|
<\\/script>
|
|
|
|
<style scoped>
|
|
.p-slider-horizontal, .p-inputtext {
|
|
width: 14rem;
|
|
}
|
|
.p-slider-vertical {
|
|
height: 14rem;
|
|
}
|
|
</style>`
|
|
}
|
|
}
|
|
};
|
|
}
|
|
};
|
|
</script>
|