Range Slider - 图1

Range Slider Vue Component

Range Slider Vue component represents Range Slider component.

Range Slider Components

There are following components included:

  • **f7-range**

Range Slider Properties

Prop Type Default Description
<f7-range> properties
--- --- --- ---
init boolean true Initializes Range Slider
value number array string Range Slider value, must be array in case of dual range slider
min number string Minimum value
max number string Maximum value
step number string 1 Maximum value
label boolean false Enables additional label around range slider knob
dual boolean false Enables dual range slider
draggable-bar boolean true When enabled it is also possible to interact with range slider (change value) on range bar click and swipe.
format-label function(value) Method must return formatted range knob label text. As an argument it receives label value
disabled boolean false Defines whether the range slider is disabled or not
id string Range slider element ID attribute
input boolean false If enabled, then it will render input type=”range” element inside as well
input-id string Input element ID attribute

Range Slider Events

Event Description
<f7-range> events
--- ---
range:change Event will be triggered when Range Slider value has been changed
range:changed Event will be triggered on slider knob release after value change

Range Slider Methods

Event Description
<f7-range> methods
--- ---
.setValue(newValue) Set new range slider value
.getValue() Returns range slider value

Examples

1. <template>
2. <f7-page>
3. <f7-navbar title="Range Slider"></f7-navbar>

5. <f7-block-title>Volume</f7-block-title>
6. <f7-list simple-list>
7. <f7-list-item>
8. <f7-list-item-cell class="width-auto flex-shrink-0">
9. <f7-icon ios="f7:volume_mute_fill" md="material:volume_mute"></f7-icon>
10. </f7-list-item-cell>
11. <f7-list-item-cell class="flex-shrink-3">
12. <f7-range
13. :min="0"
14. :max="100"
15. :step="1"
16. :value="10"
17. ></f7-range>
18. </f7-list-item-cell>
19. <f7-list-item-cell class="width-auto flex-shrink-0">
20. <f7-icon ios="f7:volume_fill" md="material:volume_up"></f7-icon>
21. </f7-list-item-cell>
22. </f7-list-item>
23. </f7-list>

25. <f7-block-title>Brightness</f7-block-title>
26. <f7-list simple-list>
27. <f7-list-item>
28. <f7-list-item-cell class="width-auto flex-shrink-0">
29. <f7-icon ios="f7:circle" md="material:brightness_low"></f7-icon>
30. </f7-list-item-cell>
31. <f7-list-item-cell class="flex-shrink-3">
32. <f7-range
33. :min="0"
34. :max="100"
35. :step="1"
36. :value="50"
37. :label="true"
38. color="orange"
39. ></f7-range>
40. </f7-list-item-cell>
41. <f7-list-item-cell class="width-auto flex-shrink-0">
42. <f7-icon ios="f7:circle_half" md="material:brightness_high"></f7-icon>
43. </f7-list-item-cell>
44. </f7-list-item>
45. </f7-list>

47. <f7-block-title class="display-flex justify-content-space-between">Price Filter <span>${{priceMin}} - ${{priceMax}}</span></f7-block-title>
48. <f7-list simple-list>
49. <f7-list-item>
50. <f7-list-item-cell class="width-auto flex-shrink-0">
51. <f7-icon ios="f7:circle" md="material:brightness_low"></f7-icon>
52. </f7-list-item-cell>
53. <f7-list-item-cell class="flex-shrink-3">
54. <f7-range
55. :min="0"
56. :max="500"
57. :step="1"
58. :value="[priceMin, priceMax]"
59. :label="true"
60. :dual="true"
61. color="green"
62. @range:change="onPriceChange"
63. ></f7-range>
64. </f7-list-item-cell>
65. <f7-list-item-cell class="width-auto flex-shrink-0">
66. <f7-icon ios="f7:circle_half" md="material:brightness_high"></f7-icon>
67. </f7-list-item-cell>
68. </f7-list-item>
69. </f7-list>
70. </f7-page>
71. </template>

73. <script>
74. export default {
75. data() {
76. return {
77. priceMin: 200,
78. priceMax: 400,
79. };
80. },
81. methods: {
82. onPriceChange(values) {
83. this.priceMin = values[0];
84. this.priceMax = values[1];
85. },
86. },
87. };
88. </script>