Range Slider - 图1

Range Slider Svelte Component

Range Slider Svelte component represents Range Slider component.

Range Slider Components

There are following components included:

  • Range

Range Slider Properties

Prop Type Default Description
<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
vertical boolean false Enables vertical range slider
verticalReversed boolean false Makes vertical range slider reversed. (Only when vertical:true)
draggableBar boolean true When enabled it is also possible to interact with range slider (change value) on range bar click and swipe.
formatLabel function(value) Method must return formatted range knob label text. As an argument it receives label value
scale boolean false Enables range slider scale
scaleSteps number 5 Number of scale steps
scaleSubSteps number 0 Number of scale sub steps (each step will be divided by this value)
formatScaleLabel function (value) Method must return formatted scale value. As an argument it receives currect scale step value. This method will be called as for each scale step.
limitKnobPosition boolean Limits knob position to the size of the range bar. By default enabled from iOS theme
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
inputId string Input element ID attribute
name string Input element “name” attribute

Range Slider Events

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

Range Slider Methods

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

Examples

1. <Page>
2. <Navbar title="Range Slider"></Navbar>

4. <BlockTitle>Volume</BlockTitle>
5. <List simpleList>
6. <ListItem>
7. <ListItemCell class="width-auto flex-shrink-0">
8. <Icon ios="f7:speaker_fill" aurora="f7:speaker_fill" md="material:volume_mute"></Icon>
9. </ListItemCell>
10. <ListItemCell class="flex-shrink-3">
11. <Range
12. min={0}
13. max={100}
14. step={1}
15. value={10}
16. ></Range>
17. </ListItemCell>
18. <ListItemCell class="width-auto flex-shrink-0">
19. <Icon ios="f7:speaker_3_fill" aurora="f7:speaker_3_fill" md="material:volume_up"></Icon>
20. </ListItemCell>
21. </ListItem>
22. </List>

24. <BlockTitle>Brightness</BlockTitle>
25. <List simpleList>
26. <ListItem>
27. <ListItemCell class="width-auto flex-shrink-0">
28. <Icon ios="f7:sun_min" aurora="f7:sun_min" md="material:brightness_low"></Icon>
29. </ListItemCell>
30. <ListItemCell class="flex-shrink-3">
31. <Range
32. min={0}
33. max={100}
34. step={1}
35. value={50}
36. label={true}
37. color="orange"
38. ></Range>
39. </ListItemCell>
40. <ListItemCell class="width-auto flex-shrink-0">
41. <Icon ios="f7:sun_max" aurora="f7:sun_max" md="material:brightness_high"></Icon>
42. </ListItemCell>
43. </ListItem>
44. </List>

46. <BlockTitle class="display-flex justify-content-space-between">
47. <span>Price Filter</span>
48. <span>${priceMin} - ${priceMax}</span>
49. </BlockTitle>
50. <List simpleList>
51. <ListItem>
52. <ListItemCell class="width-auto flex-shrink-0">
53. <Icon ios="f7:money_dollar_round" aurora="f7:money_dollar_round" md="material:attach_money"></Icon>
54. </ListItemCell>
55. <ListItemCell class="flex-shrink-3">
56. <Range
57. min={0}
58. max={500}
59. step={1}
60. value={[priceMin, priceMax]}
61. label={true}
62. dual={true}
63. color="green"
64. onRangeChange={onPriceChange}
65. ></Range>
66. </ListItemCell>
67. <ListItemCell class="width-auto flex-shrink-0">
68. <Icon ios="f7:money_dollar_round_fill" aurora="f7:money_dollar_round_fill" md="material:monetization_on"></Icon>
69. </ListItemCell>
70. </ListItem>
71. </List>

73. <BlockTitle>With Scale</BlockTitle>
74. <Block strong>
75. <Range
76. min={0}
77. max={100}
78. label={true}
79. step={5}
80. value={25}
81. scale={true}
82. scaleSteps={5}
83. scaleSubSteps={4}
84. />
85. </Block>

87. <BlockTitle>Vertical</BlockTitle>
88. <Block strong class="display-flex justify-content-center">
89. <Range
90. class="margin-right"
91. style="height: 160px"
92. vertical={true}
93. min={0}
94. max={100}
95. label={true}
96. step={1}
97. value={25}
98. />
99. <Range
100. class="margin-horizontal"
101. style="height: 160px"
102. vertical={true}
103. min={0}
104. max={100}
105. label={true}
106. step={1}
107. value={50}
108. />
109. <Range
110. class="margin-horizontal"
111. style="height: 160px"
112. vertical={true}
113. min={0}
114. max={100}
115. label={true}
116. step={1}
117. value={75}
118. />
119. <Range
120. class="margin-left"
121. style="height: 160px"
122. dual={true}
123. vertical={true}
124. min={0}
125. max={100}
126. label={true}
127. step={1}
128. value={[25, 75]}
129. />
130. </Block>

132. <BlockTitle>Vertical Reversed</BlockTitle>
133. <Block strong class="display-flex justify-content-center">
134. <Range
135. class="margin-right"
136. color="red"
137. style="height: 160px"
138. vertical={true}
139. verticalReversed={true}
140. min={0}
141. max={100}
142. label={true}
143. step={1}
144. value={25}
145. />
146. <Range
147. class="margin-horizontal"
148. color="red"
149. style="height: 160px"
150. vertical={true}
151. verticalReversed={true}
152. min={0}
153. max={100}
154. label={true}
155. step={1}
156. value={50}
157. />
158. <Range
159. class="margin-horizontal"
160. color="red"
161. style="height: 160px"
162. vertical={true}
163. verticalReversed={true}
164. min={0}
165. max={100}
166. label={true}
167. step={1}
168. value={75}
169. />
170. <Range
171. class="margin-left"
172. color="red"
173. style="height: 160px"
174. dual={true}
175. vertical={true}
176. verticalReversed={true}
177. min={0}
178. max={100}
179. label={true}
180. step={1}
181. value={[25, 75]}
182. />
183. </Block>
184. </Page>

186. <script>
187. import {f7, Page, Navbar, BlockTitle, List, ListItem, ListItemCell, Icon, Range, Block} from 'framework7-svelte';

189. let priceMin = 200;
190. let priceMax = 400;

192. function onPriceChange(values) {
193. priceMin = values[0];
194. priceMax = values[1];
195. }
196. </script>

← Radio

Searchbar →