スベルトとスライダ

8068 ワード
svelte tailwindcss webdev javascript テキストリンク

SvelTeおよびTarwindスライダーコンポーネント


フォームの範囲(スライダ)コンポーネントをsvelteとtailwindcssで構築

インストール


    $npm i -D @fouita/slider

用途


単一値範囲



image slider-simple


<script>
    import Slider from '@fouita/slider'                 
    let value = 21
</script>

<div class="p-6 text-3xl text-center">
    {value} 
</div>
<Slider class="mt-5 mx-6" min={0} max={30} bind:value />

多値範囲


複数の値は次のように2つの値の配列で動作します

<script>
    import Slider from '@fouita/slider'                 
    let value = [10,21]
</script>

<div class="p-6 text-3xl text-center">
    {value} 
</div>
<Slider class="mt-5 mx-6" min={0} max={30} bind:value />

ツールチップで


加えることによってtooltip propスライディング時の値を表示できます

<Slider tooltip min={0} max={30} bind:value />
我々は、スライダのポインタを追加することによってホバリング時にツールチップを見ることができますtooltip=hover
<Slider tooltip=hover min={0} max={30} bind:value />

カスタムカラー


我々は、追加によって色を変更することができますcolor 支柱

<Slider tooltip=hover color=pink min={0} max={30} bind:value />

カスタムラベル


ラベルを変更するにはminLabel & maxLabel . また、空の文字列を使用して削除することもできます.

<Slider tooltip=hover minLabel='$0' maxLabel='Expensive' min={0} max={30} bind:value />

カスタム指標


ツールチップの値を変更するには、valueLabel プロップ
場合は、単純な文字列を追加することができますvalueLabel="$%d" 
<Slider valueLabel={['%d €','%d €']} tooltip min={0} max={30} bind:value />

カスタムスケール


値のカスタム配列を使用し、特定の番号を押すと、目的のラベルを表示できます.
スキルの尺度を仮定する[basic, medium, advanced, expert]
  • 0 - 5 :基礎
  • 5 - 15ミディアム
  • 15 - 25アドバンス
  • 25 - 30エキスパート

    • <script>
  import Slider from '@fouita/slider'

  let skill_level=['Basic','Medium','Advanced','Expert']
  let vlevel=10 // medium by default 

</script>

<Slider bind:value={vlevel} min={0} max={30} minLabel="Basic" maxLabel="Expert" valueLabel={skill_level[Math.round(vlevel/10)]} tooltip="hover" />

    ソースコード


    Fouita slider

    アバウト


    Fouita : UI framework for svelte + tailwind components
    【iOS】読み上げ機能について
    ubuntuインストール削除アンインストールDebパッケージファイル