slider.py 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. """A slider component."""
  2. from typing import Dict
  3. from reflex.components.component import Component
  4. from reflex.components.libs.chakra import ChakraComponent
  5. from reflex.event import EVENT_ARG
  6. from reflex.vars import Var
  7. class Slider(ChakraComponent):
  8. """The wrapper that provides context and functionality for all children."""
  9. tag = "Slider"
  10. # State var to bind the input.
  11. value: Var[int]
  12. # The color scheme.
  13. color_scheme: Var[str]
  14. # The placeholder text.
  15. default_value: Var[int]
  16. # The writing mode ("ltr" | "rtl")
  17. direction: Var[str]
  18. # If false, the slider handle will not capture focus when value changes.
  19. focus_thumb_on_change: Var[bool]
  20. # If true, the slider will be disabled
  21. is_disabled: Var[bool]
  22. # If true, the slider will be in `read-only` state.
  23. is_read_only: Var[bool]
  24. # If true, the value will be incremented or decremented in reverse.
  25. is_reversed: Var[bool]
  26. # The minimum value of the slider.
  27. min_: Var[int]
  28. # The maximum value of the slider.
  29. max_: Var[int]
  30. # The step in which increments/decrements have to be made
  31. step: Var[int]
  32. # The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
  33. min_steps_between_thumbs: Var[int]
  34. # Oreintation of the slider vertical | horizontal.
  35. orientation: Var[str]
  36. # Minimum height of the slider.
  37. min_h: Var[str]
  38. # Minimum width of the slider.
  39. min_w: Var[str]
  40. # Maximum height of the slider.
  41. max_h: Var[str]
  42. # Maximum width of the slider.
  43. max_w: Var[str]
  44. def get_controlled_triggers(self) -> Dict[str, Var]:
  45. """Get the event triggers that pass the component's value to the handler.
  46. Returns:
  47. A dict mapping the event trigger to the var that is passed to the handler.
  48. """
  49. return {
  50. "on_change": EVENT_ARG,
  51. "on_change_end": EVENT_ARG,
  52. "on_change_start": EVENT_ARG,
  53. }
  54. @classmethod
  55. def create(cls, *children, **props) -> Component:
  56. """Create a slider component.
  57. If no children are provided, a default slider will be created.
  58. Args:
  59. *children: The children of the component.
  60. **props: The properties of the component.
  61. Returns:
  62. The slider component.
  63. """
  64. if len(children) == 0:
  65. children = [
  66. SliderTrack.create(
  67. SliderFilledTrack.create(),
  68. ),
  69. SliderThumb.create(),
  70. ]
  71. return super().create(*children, **props)
  72. class SliderTrack(ChakraComponent):
  73. """The empty part of the slider that shows the track."""
  74. tag = "SliderTrack"
  75. class SliderFilledTrack(ChakraComponent):
  76. """The filled part of the slider."""
  77. tag = "SliderFilledTrack"
  78. class SliderThumb(ChakraComponent):
  79. """The handle that's used to change the slider value."""
  80. tag = "SliderThumb"
  81. # The size of the thumb.
  82. box_size: Var[str]
  83. class SliderMark(ChakraComponent):
  84. """The label or mark that shows names for specific slider values."""
  85. tag = "SliderMark"