範圍滑桿 Svelte 元件

範圍滑桿 Svelte 元件表示範圍滑桿元件。

範圍滑桿元件

包含下列元件

範圍

範圍滑桿屬性

屬性	類型	預設值	說明
<Range> 屬性
init	布林值	true	初始化範圍滑桿
value	數字陣列字串		範圍滑桿值，如果是雙範圍滑桿，必須是陣列
min	數字字串		最小值
max	數字字串		最大值
step	數字字串	1	值之間的最小步長
label	布林值	false	啟用範圍滑桿旋鈕周圍的額外標籤
dual	布林值	false	啟用雙範圍滑桿
vertical	布林值	false	啟用垂直範圍滑桿
verticalReversed	布林值	false	使垂直範圍滑桿反轉。（僅在 `vertical:true` 時）
draggableBar	布林值	true	啟用後，也可以透過點擊和滑動範圍列來與範圍滑桿互動（變更值）。
formatLabel	函式(value)		方法必須傳回格式化的範圍旋鈕標籤文字。它接收標籤值作為參數
scale	布林值	false	啟用範圍滑桿刻度
scaleSteps	數字	5	刻度步數
scaleSubSteps	數字	0	刻度子步數（每個步數將除以這個值）
formatScaleLabel	函式 (value)		方法必須傳回格式化的刻度值。它接收目前的刻度步數值作為參數。此方法將針對每個刻度步數呼叫。
limitKnobPosition	布林值		將旋鈕位置限制在範圍列的大小。預設從 iOS 主題啟用
disabled	布林值	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>

改善此文件

在此頁面上

範圍滑桿元件
範圍滑桿屬性
範圍滑桿事件
範例