17 lines
12 KiB
HTML
17 lines
12 KiB
HTML
<!DOCTYPE html> <head> <meta charset=utf-8> <meta content="width=device-width,initial-scale=1" name=viewport> <meta content=#333333 name=theme-color> <base href=/svelma-pro/ > <link href=global.css rel=stylesheet> <link href=manifest.json rel=manifest> <link href=favicon.ico rel=icon type=image/png> <link href=./all.css rel=stylesheet> <link href=client/main.1916252291.css rel=stylesheet><link href=client/chunk.f5a3f321.css rel=stylesheet><link href=client/chunk.b01e898f.css rel=stylesheet><link href=client/chunk.fb378401.css rel=stylesheet><link href=client/chunk.94a6e723.css rel=stylesheet> <noscript id=sapper-head-start></noscript><title>svelma-pro</title><meta content=Svelma property=og:site_name><meta content=https://c0bra.github.io/svelma-pro/svelma-pro-logo.png property=og:image><meta content=200 property=og:image:width><meta content=200 property=og:image:height><meta property=og:url><meta content=article property=og:type><meta content="Slider | Svelma" property=og:title><meta content=滑动条 property=og:description><noscript id=sapper-head-end></noscript> </head> <body> <div id=sapper> <nav class="has-shadow is-spaced navbar" id=navbar><div class=container style=height:50px;min-height:50px><div class=navbar-brand><a href=/ class="brand navbar-item svelte-19nr2rz"> svelma-pro </a></div></div></nav> <main><section class="svelte-1ib6y6h docs"><div class="svelte-h7woek sidebar-bg"></div> <aside class="svelte-h7woek sidebar"><p class="svelte-h7woek sidebar-label">Installation</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=install>Start</a></ul> <p class="svelte-h7woek sidebar-label">Bulma Elements</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=bulma/intro>Intro</a></li> <li class=svelte-h7woek><a href=bulma/hero>Hero</a> <li class=svelte-h7woek><a href=bulma/media>Media</a> <li class=svelte-h7woek><a href=bulma/table>Table</a> <li class=svelte-h7woek><a href=bulma/tiles>Tiles</a> </ul> <p class="svelte-h7woek sidebar-label">Svelma Components</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/button>Button </a> <li class=svelte-h7woek><a href=components/carousel>Carousel </a> <li class=svelte-h7woek><a href=components/collapse>Collapse </a> <li class=svelte-h7woek><a href=components/colorpicker>ColorPicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/datepicker>Datepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/dialog>Dialog </a> <li class=svelte-h7woek><a href=components/district>District <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><p>Form</p> <ul class=svelte-h7woek><li class=svelte-h7woek><a href=components/field>Field </a> <li class=svelte-h7woek><a href=components/input>Input </a> <li class=svelte-h7woek><a href=components/switch>Switch </a> </li> </ul> <li class=svelte-h7woek><a href=components/icon>Icon </a> <li class=svelte-h7woek><a href=components/layout>Layout <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/message>Message </a> <li class=svelte-h7woek><a href=components/modal>Modal </a> <li class=svelte-h7woek><a href=components/nav>Nav <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/notification>Notification </a> <li class=svelte-h7woek><a href=components/pagination>Pagination </a> <li class=svelte-h7woek><a href=components/progress>Progress </a> <li class=svelte-h7woek><a href=components/select>Select <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/slider>Slider <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/snackbar>Snackbar </a> <li class=svelte-h7woek><a href=components/stable>Stable <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/table>Table </a> <li class=svelte-h7woek><a href=components/tabs>Tabs </a> <li class=svelte-h7woek><a href=components/timepicker>Timepicker <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/tip>Tip <span class="svelte-h7woek new">New</span> </a> <li class=svelte-h7woek><a href=components/toast>Toast </a> </li> </ul></aside> <div class="svelte-1ib6y6h docs-main"> <header class=header><h1 class=title>Slider</h1> <h2 class=subtitle>滑动条</h2></header> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input type=hidden value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8Zj7cxy5OK8zAcwAZRcaaC5kkGq1XHMAHJjSNUOEeFqh3FYEqRGEOjAHeYANoABhk5gpAF143EwF1iMwIGRzMRlBg_e6Y62GWeyHRYIQoLgKO751BF-vtzGapIzFyVY1nWDjAB-X5rtu_7oHonbeFc5jYAomCIOBS6zOgyRrv4yyoPgyQUjhZCIJgQSoBQACiWA-MA14OkYZ4XugV4xn2bwwDwWGEGuhEgBy6B5iAPCoMQrjkXCtD0MgIBaOW0mhCsQijqM4RKKgvCwCAchiEEcAngJugUtx3FaSAaYiAAIhxbBpugxAQPAHDdFw4RBF04RbEIAB6AAslKEESplalAn48N5RkUmulJBbgIUdDwE6fhQCiROiXBkBKuheQAnGShA-TFcUJXwHTJeg4ToDyMCuWiUBiN5fl3GShWhYlpUpaOghZSSUWki18VtWV4TBLCQQNcZBVyHpQQiJELjeb10UimmhSKHZDkINJnUlro_CsG8pnKagQh7fAMpyAAAgiioomiKxlAiLC3XQKzhJqWQnQIZ2mUMY6fftMoikBtbMJtoBDNAmBCMFoXmJEpkZswuAQ1AUO6DD8Vw8QcPIqZ5nQ-56pvKgiokTAIi2h0SMo1DU0-jKujTRTPAdNgLjEId9NkyISkQDN5gs2zEDY-E4T49IEtAA name=parameters> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="is-small fa-external-link-alt fas icon"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview>0 <input type=number value=0 class=svelte-1lkik2c> <div class="svelte-1lkik2c track"><div class="svelte-1lkik2c progress-sli" style=""></div> <div class="svelte-1re10fc thumb" style=left:0> <div class="svelte-1re10fc thumb-content"> <div class="svelte-1lkik2c thumb"></div> </div></div> </div></div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
||
import { Slider } from 'svelma-pro'
|
||
let value = [0, 1];
|
||
|
||
function change() {
|
||
console.log(value[0])
|
||
}
|
||
</script>
|
||
{value[0]}
|
||
<Slider bind:value min="0" max="1" on:dragEnd={() => change()} step="0.01"/></code></pre></figure></div> </div></div> <hr class=is-medium> <p class="title is-4">范围选择</p> <div class="svelte-150a96u snippet"><form action=https://codesandbox.io/api/v1/sandboxes/define method=POST target=_blank><input type=hidden value=N4IgZglgNgpgziAXKOBDAdgEwEYHsAeAdAMa7qQDmhAVnGUqKegC4wsMisC2ADlKqyQg4ANxhRBAX0kAaEBCwwiAC2ZcoHJq3aIQAHlXqAfAB10AAnN68mAJ6mLlq1AUBrM06cRMAXhMglVgAndFQoAFpiODh_D09zIPE_YWZbWDhlGBhmWMdPVJ4YZNZ8ZgB6KJiQOM9lRLBk1WYeOEQysoBXdB5XKlIuMuwOqC5UCujB4dHCLgUSaNz48y4YTAhUZLCoRacyh089F3R3PK9ff0CYELDI6IAmHc9EqGS4VPTM7MenAqL_EvKlW-ljqMAa_iaLTanTgMEIYDIzFQAHd4LgViR0WVnjBULC4GURABWQgAZkIAEZxgStvMqjUnCs1ht_Ftvns4npBrg7A4uYYoEYQLJ5IoiLRNIi2MwhBBeLggsxzABBHg8cxgILo8z-QhlVU8QiicSsfwAbjMZiYb3MqDV5h85nQMGRKrVAApgHEkUEKNlEOZMLhiB0VixCDZbGZJABKC3oMxKHgKpWYMGoYZKu08M3CuQGo1iCQwSUsaVCPRwYhBCA8ZgOOXJxXmYDmADKLjTQXMkg1Wq45gA5MaRqhwjwtYPLRZYEqghg_XcHeYANoUgAMMnMFI3AF141yqzW6w4PMARGEOjAV-vd5JwufL9eKXePHoO94rstUPhknd1-u_jmG8MA8MkG5AdgCiYIgF5QFePjAPO6CLr2yF-uYCpduYzC1sUQRXv4HLoHmIA8KgxCuKgfo0HQJHICAWjlgxoQrEII6jOESioLwsAgHIYhBHAED0LoFKEOuEn8SAaYiAAIqBbBpugxAQPAHDdFw4QEeg4RbEIAB6AAslKEES0lalA8E8IZ4kbpSFm4FZHQ8OO8EUAokTolwZASroBkAJxkoQRmOc5rl8B0Hm6egPIwNpaJQGIhkmXcZJhdZblRZ5I6CP5JKSaSGUuVl0XhMEsJBClEkhdJwlBCIkQuIZhUOSKaaFIoKlqQgDG5SWuj8Kwbx1UWoxCEN8AynIAACCKKiiaIrGUCIsItdArOEmpZBNAhTdJQyjrtw0yiKR61swvWgEM0CYEIlnWeYkTSRmzC4DdUB3boD0uU9xBPci0myfdXTjsBPrMIgsm2h0b0fXdchvKgirsRADXmDwHTYC4xB1RDUMwCIqPo5j2MQP94ThMD0g00AA name=parameters> <div class="slot-wrap svelte-7fflr3"><div class="svelte-150a96u codepen-button">Codesandbox <i class="is-small fa-external-link-alt fas icon"></i></div></div></form> <div class="svelte-150a96u preview"><div slot=preview>10-110 <input type=number value=10 class=svelte-1lkik2c> <input type=number value=110 class=svelte-1lkik2c> <div class="svelte-1lkik2c track"><div class="svelte-1lkik2c progress-sli" style=""></div> <div class="svelte-1re10fc thumb" style=left:5%><div class="svelte-1re10fc sli-tip">10</div> <div class="svelte-1re10fc thumb-content"> <div class="svelte-1lkik2c thumb"></div> </div></div> <div class="svelte-1re10fc thumb" style=left:55.00000000000001%><div class="svelte-1re10fc sli-tip">110</div> <div class="svelte-1re10fc thumb-content"> <div class="svelte-1lkik2c thumb"></div> </div></div></div></div></div> <div class="svelte-150a96u code"> <div class="svelte-1ccczge codeview"><figure class="svelte-1ccczge highlight is-expanded"><div class="svelte-1ccczge button-container"><button class="is-small button copy-code is-text">Copy</button></div> <pre class="svelte-1ccczge hidden"><code class="svelte-1ccczge xml"></code></pre> <pre class="svelte-1ccczge hidden"><code><script>
|
||
import { Slider } from 'svelma-pro'
|
||
|
||
let range2 = [10, 110];
|
||
</script>
|
||
|
||
{value[0]}-{value[1]}
|
||
<Slider max="200" step="10" bind:value={range2} range order tip="true"/></code></pre></figure></div> </div></div> <hr class=is-medium> <section><h2 class="title is-4">API</h2> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Description</th> <th>Type</th> <th>Values</th> <th>Default</thead> <tr><td><code>value</code></td> <td>绑定值,单选以Array[0]为准</td> <td>Array [number, number]</td> <td>[min, max]</td> <td><code>[min, max]</code></td> <tr><td><code>min</code></td> <td>最小值</td> <td>Number</td> <td>—</td> <td><code>0</code></td> <tr><td><code>max</code></td> <td>最大值</td> <td>Number</td> <td>—</td> <td><code>100</code></td> <tr><td><code>step</code></td> <td>步长</td> <td>Number</td> <td>—</td> <td><code>1</code></td> <tr><td><code>range</code></td> <td>设置为true使用范围输入</td> <td>Boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>order</code></td> <td>如果你想要value[0]的值总是大于value[1]，就将它设置为true</td> <td>Boolean</td> <td>—</td> <td><code>false</code></td> <tr><td><code>slot</code></td> <td>自定义滑块</td> <td>Slots</td> <td>default,left,right</td> <td><code>default</code></td> </table></div></section> <hr class=is-medium> <section><h2 class="title is-4">EVENT</h2> <div class="svelte-2ae2jn table-wrapper"><table class="is-fullwidth table"><thead><tr><th>Name</th> <th>Parameters</th> <th>Description</thead> <tr><td><code>change</code></td> <td>—</td> <td>选择改变事件</td> <tr><td><code>dragEnd</code></td> <td>—</td> <td>拖动停止事件</td> </table></div></section></div></section></main></div> <script>__SAPPER__={baseUrl:"/svelma-pro",preloaded:[void 0,null,(function(a,b,c,d,e,f){return {jsdoc:[{description:"绑定值,单选以Array[0]为准",type:["Array [number, number]"],defaultvalue:c,name:"value",values:c},{description:"最小值",type:[b],defaultvalue:"0",name:"min",values:a},{description:"最大值",type:[b],defaultvalue:"100",name:"max",values:a},{description:"步长",type:[b],defaultvalue:"1",name:"step",values:a},{description:"设置为true使用范围输入",type:[d],defaultvalue:e,name:"range",values:a},{description:"如果你想要value[0]的值总是大于value[1]，就将它设置为true",type:[d],defaultvalue:e,name:"order",values:a},{description:"自定义滑块",type:["Slots"],defaultvalue:"default",name:"slot",values:"default,left,right"},{isEvent:f,description:"选择改变事件",name:"change",values:a},{isEvent:f,description:"拖动停止事件",name:"dragEnd",values:a}]}}("","Number","[min, max]","Boolean","false",true))]};if('serviceWorker' in navigator)navigator.serviceWorker.register('/svelma-pro/service-worker.js');var s=document.createElement("script");try{new Function("if(0)import('')")();s.src="/svelma-pro/client/client.3704696d.js";s.type="module";s.crossOrigin="use-credentials";}catch(e){s.src="/svelma-pro/client/shimport@1.0.1.js";s.setAttribute("data-main","/svelma-pro/client/client.3704696d.js")}document.head.appendChild(s)</script> |