范围滑块 Svelte 组件

范围滑块 Svelte 组件表示范围滑块组件。

范围滑块组件

包含以下组件：

Range

范围滑块属性

属性	类型	默认	描述
<Range> 属性
init	布尔值	true	初始化范围滑块
值	数字数组字符串		范围滑块值，在双范围滑块情况下必须是数组
min	数字字符串		最小值
max	数字字符串		最大值
step	数字字符串	1	值之间的最小步长
label	布尔值	false	启用范围滑块旋钮周围的附加标签
双	布尔值	false	启用双范围滑块
垂直	布尔值	false	启用垂直范围滑块
verticalReversed	布尔值	false	使垂直范围滑块反向。 (仅当`vertical:true`)
draggableBar	布尔值	true	启用后，也可以通过点击和滑动范围条来交互范围滑块（更改值）
formatLabel	函数(值)		方法必须返回格式化的范围旋钮标签文本。作为参数接收标签值
scale	布尔值	false	启用范围滑块刻度
scaleSteps	数字	5	刻度步数
scaleSubSteps	数字	0	刻度子步数（每个步长将被此值除）
formatScaleLabel	函数 (值)		方法必须返回格式化的刻度值。作为参数接收当前刻度步长值。此方法将对每个刻度步长调用。
limitKnobPosition	布尔值		将旋钮位置限制在范围条的大小内。默认情况下从 iOS 主题启用
禁用	布尔值	false	定义范围滑块是否禁用
id	字符串		范围滑块元素 ID 属性
input	布尔值	false	启用后，它将渲染`input type="range"`元素内部
inputId	字符串		输入元素 ID 属性
name	字符串		输入元素 "name" 属性

范围滑块事件

事件	描述
<Range> 事件
rangeChange	当范围滑块值更改时，将触发此事件
rangeChanged	在滑块旋钮释放并更改值后，将触发此事件

示例

range.svelte

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

  let priceMin = 200;
  let priceMax = 400;

  function onPriceChange(values) {
    priceMin = values[0];
    priceMax = values[1];
  }
</script>

<Page>
  <Navbar title="Range Slider" />

  <BlockTitle>Volume</BlockTitle>
  <List simpleList strongIos outlineIos>
    <ListItem>
      <div>
        <Icon ios="f7:speaker_fill" md="material:volume_mute" />
      </div>
      <div style="width: 100%; margin: 0 16px">
        <Range min={0} max={100} step={1} value={10} />
      </div>
      <div>
        <Icon ios="f7:speaker_3_fill" md="material:volume_up" />
      </div>
    </ListItem>
  </List>

  <BlockTitle>Brightness</BlockTitle>
  <List simpleList strongIos outlineIos>
    <ListItem>
      <div>
        <Icon ios="f7:sun_min" md="material:brightness_low" />
      </div>
      <div style="width: 100%; margin: 0 16px">
        <Range min={0} max={100} step={1} value={50} label={true} color="orange" />
      </div>
      <div>
        <Icon ios="f7:sun_max_fill" md="material:brightness_high" />
      </div>
    </ListItem>
  </List>

  <BlockTitle class="display-flex justify-content-space-between">
    Price Filter
    <span>${priceMin} - ${priceMax}</span>
  </BlockTitle>
  <List simpleList strongIos outlineIos>
    <ListItem>
      <div>
        <Icon ios="f7:money_dollar_circle" md="material:attach_money" />
      </div>
      <div style="width: 100%; margin: 0 16px">
        <Range
          min={0}
          max={500}
          step={1}
          value={[priceMin, priceMax]}
          label={true}
          dual={true}
          color="green"
          onRangeChange={onPriceChange}
        />
      </div>
      <div>
        <Icon ios="f7:money_dollar_circle_fill" md="material:monetization_on" />
      </div>
    </ListItem>
  </List>

  <BlockTitle>With Scale</BlockTitle>
  <Block strongIos outlineIos>
    <Range
      min={0}
      max={100}
      label={true}
      step={5}
      value={25}
      scale={true}
      scaleSteps={5}
      scaleSubSteps={4}
    />
  </Block>

  <BlockTitle>Vertical</BlockTitle>
  <Block strongIos outlineIos class="display-flex justify-content-center">
    <Range
      class="margin-right"
      style="height: 160px"
      vertical={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={25}
    />
    <Range
      class="margin-horizontal"
      style="height: 160px"
      vertical={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={50}
    />
    <Range
      class="margin-horizontal"
      style="height: 160px"
      vertical={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={75}
    />
    <Range
      class="margin-left"
      style="height: 160px"
      dual={true}
      vertical={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={[25, 75]}
    />
  </Block>

  <BlockTitle>Vertical Reversed</BlockTitle>
  <Block strongIos outlineIos class="display-flex justify-content-center">
    <Range
      class="margin-right"
      color="red"
      style="height: 160px"
      vertical={true}
      verticalReversed={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={25}
    />
    <Range
      class="margin-horizontal"
      color="red"
      style="height: 160px"
      vertical={true}
      verticalReversed={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={50}
    />
    <Range
      class="margin-horizontal"
      color="red"
      style="height: 160px"
      vertical={true}
      verticalReversed={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={75}
    />
    <Range
      class="margin-left"
      color="red"
      style="height: 160px"
      dual={true}
      vertical={true}
      verticalReversed={true}
      min={0}
      max={100}
      label={true}
      step={1}
      value={[25, 75]}
    />
  </Block>
</Page>

改进此文档

在本页上

范围滑块组件
范围滑块属性
范围滑块事件
示例