{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `EditableIntRangeSlider` widget allows selecting a integer range using a slider with two handles and two input boxes to manually adjust the value.\n",
    "\n",
    "Discover more on using widgets to add interactivity to your applications in the [how-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html). Alternatively, learn [how to set up callbacks and (JS-)links between parameters](https://panel.holoviz.org/how_to/links/index.html) or [how to use them as part of declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html).\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "For details on other options for customizing the component see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`disabled`** (boolean): Whether the widget is editable\n",
    "* **`end`** (float): The range's upper bound\n",
    "* **`start`** (float): The range's lower bound\n",
    "* **`step`** (float): The interval between values\n",
    "* **`value`** (tuple): Tuple of upper and lower bounds of selected range\n",
    "* **`value_throttled`** (tuple): Tuple of upper and lower bounds of selected range throttled until mouseup\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`bar_color`** (color): Color of the slider bar as a hexadecimal RGB value.\n",
    "* **`direction`** (`str`): Whether the slider should go from left to right ('ltr') or right to left ('rtl').\n",
    "* **`format`** (string): The datetime's format\n",
    "* **`inline_layout`** (`boolean`): Whether the editable input fields should be laid out inline with the slider.\n",
    "* **`label`** (`str`): The title of the widget.\n",
    "* **`marks`** (`boolean | list[dict]`):  Marks indicate predetermined values to which the user can move the slider. If True the `options` are shown as marks. If a list, it should contain dicts with 'value' and an optional 'label' keys.\n",
    "* **`orientation`** (`Literal[\"horizonta\", \"vertical\"]`): Whether the slider should be displayed in a 'horizontal' or 'vertical' orientation.\n",
    "* **`show_value`** (`boolean`): Whether to show the widget value as a label or not. \n",
    "* **`tooltips`** (`boolean | Literal[\"auto\"]`): Whether to display tooltips on the slider handle.\n",
    "* **`track`** (`Literal[\"normal\", \"inverted\"]`): Whether to display 'normal' or 'inverted'.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (dict): Component level styling API.\n",
    "- **`theme_config`** (dict): Theming API.\n",
    "\n",
    "##### Aliases\n",
    "\n",
    "For compatibility with Panel certain parameters are allowed as aliases:\n",
    "\n",
    "- **`name`**: Alias for `label`\n",
    "\n",
    "___"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Basic Usage\n",
    "\n",
    "The `EditableIntRangeSlider` widget allows selecting a integer range tuple in a range defined by the `start` and `end` values:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "range_slider = pmui.EditableIntRangeSlider(label='Editable Slider', start=0, end=10, value=(0, 6))\n",
    "\n",
    "range_slider"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `value` of the widget is returned as a tuple of int and can be accessed and set like any other widget:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "range_slider.value"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Fixed Range\n",
    "\n",
    "The slider is bounded by the `start` and `end` values but the text input fields can exceed `end` and go below `start`. If `value` should be fixed to a certain range it can be set with `fixed_start` and `fixed_end`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "fixed_range = pmui.EditableIntRangeSlider(\n",
    "    label='Fixed Range', start=0, end=10, value=(0, 6), fixed_start=-10, fixed_end=20 \n",
    ")\n",
    "\n",
    "fixed_range"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Format\n",
    "\n",
    "A custom format string or bokeh `TickFormatter` may be used to format the slider values:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.models.formatters import PrintfTickFormatter\n",
    "\n",
    "str_format = pmui.EditableIntRangeSlider(label='Distance', format='1[.]00')\n",
    "\n",
    "tick_format = pmui.EditableIntRangeSlider(label='Distance', format=PrintfTickFormatter(format='%d m'))\n",
    "\n",
    "pmui.Column(str_format, tick_format)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Label\n",
    "\n",
    "You may remove the `label`/ `name` by not setting it."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.EditableIntRangeSlider()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Show Value\n",
    "\n",
    "You may remove the value label by setting `show_value=False`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.EditableIntRangeSlider(show_value=False)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Disabled\n",
    "\n",
    "The widget can be disabled with `disabled=True`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.EditableIntRangeSlider(label='Int Range Slider (disabled)', disabled=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Inline\n",
    "\n",
    "The editable text entry fields can be added rendered inline with `inline_layout=True`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.EditableIntRangeSlider(label='Int Range Slider (inline)', inline_layout=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Color\n",
    "\n",
    "You can specify a `color`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.FlexBox(*(\n",
    "    pmui.EditableIntRangeSlider(label=f'Int Range Slider ({color})', color=color)\n",
    "    for color in pmui.EditableIntRangeSlider.param.color.objects\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Sizes\n",
    "\n",
    "For smaller slider, use the parameter `size=\"small\"`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Row(\n",
    "    pmui.EditableIntRangeSlider(label='Age Slider', size=\"small\"),\n",
    "    pmui.EditableIntRangeSlider(label='Age Slider', size=\"medium\"),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Custom Marks\n",
    "\n",
    "You can have custom marks by providing a rich list to the `marks` parameter. Note that unlike continuous sliders the `value` of the marks should be the integer index of the option."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "marks = [\n",
    "  {\n",
    "    \"value\": 0,\n",
    "    \"label\": '0°C',\n",
    "  },\n",
    "  {\n",
    "    \"value\": 30,\n",
    "    \"label\": '30°C',\n",
    "  },\n",
    "  {\n",
    "    \"value\": 60,\n",
    "    \"label\": '60°C',\n",
    "  },\n",
    "  {\n",
    "    \"value\": 100,\n",
    "    \"label\": '100°C',\n",
    "  },\n",
    "]\n",
    "\n",
    "pmui.EditableIntRangeSlider(marks=marks)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Tooltip always visible\n",
    "\n",
    "You can force the thumb label to be always visible with `tooltips=True`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.EditableIntRangeSlider(label='Age Slider', tooltips=True, value=(53, 94))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Tracks\n",
    "\n",
    "The *track* can be inverted or removed with `track=\"inverted\"` and `track=False` respectively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.Row(\n",
    "    pmui.EditableIntRangeSlider(label='Age Slider', value=(53, 94), track=False),\n",
    "    pmui.EditableIntRangeSlider(label='Age Slider', value=(53, 94), track=\"inverted\")\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Vertical Sliders\n",
    "\n",
    "The `orientation` of a slider may be \"vertical\":"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.EditableIntRangeSlider(label='Age Slider', value=(53, 94), orientation=\"vertical\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### API Reference\n",
    "\n",
    "The `EditableIntRangeSlider` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.EditableIntRangeSlider(label='Age Slider', value=(53, 94)).api(jslink=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### References\n",
    "\n",
    "**Panel Documentation:**\n",
    "\n",
    "- [How-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html) - Learn how to add interactivity to your applications using widgets\n",
    "- [Setting up callbacks and links](https://panel.holoviz.org/how_to/links/index.html) - Connect parameters between components and create reactive interfaces\n",
    "- [Declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html) - Build parameter-driven applications\n",
    "\n",
    "**Material UI Slider:**\n",
    "\n",
    "- [Material UI Slider Reference](https://mui.com/material-ui/react-slider/) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI Slider API](https://mui.com/material-ui/api/slider/) - Detailed API reference and configuration options"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.12.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}