{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 滑块\n",
    "\n",
    "这个元素是基于Quasar的[QSlider](https://quasar.dev/vue-components/slider)组件。\n",
    "\n",
    "- `min`：滑块的下界\n",
    "- `max`：滑块的上界\n",
    "- `step`：步长\n",
    "- `value`：设置滑块初始位置的值\n",
    "- `on_change`：当用户释放滑块时调用的回调函数"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.label.Label at 0x1c79f2ac890>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "slider = ui.slider(min=0, max=100, value=50)\n",
    "ui.label().bind_text_from(slider, 'value')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 限制事件的触发频率，包括首尾事件选项\n",
    "默认情况下，滑块的值改变事件被限制为0.05秒。这意味着如果你快速移动滑块，值只会每0.05秒更新一次。\n",
    "\n",
    "默认情况下，\"首部\"和\"尾部\"事件都是激活的。这意味着第一个事件会立即触发，最后一个事件会在限制时间后触发。\n",
    "\n",
    "这个示例展示了禁用这些选项中的任何一个是如何改变行为的。为了更清楚地看到效果，限制时间设置为1秒。第一个滑块显示默认行为，第二个只发送首部事件，第三个只发送尾部事件。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.slider.Slider at 0x1c79fc96010>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.label('default')\n",
    "ui.slider(min=0, max=10, step=0.1, value=5).props('label-always') \\\n",
    "    .on('update:model-value', lambda e: ui.notify(e.args),\n",
    "        throttle=1.0)\n",
    "\n",
    "ui.label('leading events only')\n",
    "ui.slider(min=0, max=10, step=0.1, value=5).props('label-always') \\\n",
    "    .on('update:model-value', lambda e: ui.notify(e.args),\n",
    "        throttle=1.0, trailing_events=False)\n",
    "\n",
    "ui.label('trailing events only')\n",
    "ui.slider(min=0, max=10, step=0.1, value=5).props('label-always') \\\n",
    "    .on('update:model-value', lambda e: ui.notify(e.args),\n",
    "        throttle=1.0, leading_events=False)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 禁用滑块\n",
    "您可以使用 `disable()` 方法来禁用滑块。这将阻止用户移动滑块。滑块也会变成灰色。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.button.Button at 0x1c79fca9590>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "slider = ui.slider(min=0, max=100, value=50)\n",
    "ui.button('Disable slider', on_click=slider.disable)\n",
    "ui.button('Enable slider', on_click=slider.enable)\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}