@iress-oss/ids-mcp-server 6.0.0-alpha.1-canary-20251204032753-fe18cab → 6.0.0-alpha.1-canary-20251204040305-3639454

package/generated/docs/components_components-slider-docs.md

@@ -0,0 +1,1284 @@
+Slider
+======
+
+Overview
+--------
+
+Sliders provide a visual indication of adjustable content, where the user can select a value from a range usually represented on a horizontal track.
+
+* * *
+
+Updated
+
+**Recently updated**
+
+This component has been recently updated with new props. The props have been marked as beta. Please tell us if there are any issues.
+
+[](./iframe.html?id=components-slider--default)
+
+0
+
+```
+
+<IressSlider />
+
+```
+
+Props
+-----
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Initial value of the slider. Used for uncontrolled sliders.
+
+number
+
+
+
+ | \- | Set number |
+| formatValue | 
+
+Format the changed value.
+
+( value: number, tick?: SliderTickLabelValue, readOnly?: boolean, ) => ReactNode
+
+ | \- | \- |
+| hiddenValueTooltip | 
+
+If `true`, the value tooltip will be hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| max | 
+
+Set the maximum value for the slider.
+
+number
+
+
+
+ | 
+
+10
+
+ | Set number |
+| min | 
+
+Sets minimum value for the slider.
+
+number
+
+
+
+ | 
+
+0
+
+ | Set number |
+| name | 
+
+The name of the control, which is submitted with the form data.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Emitted when the slider value changes.
+
+(e: ChangeEvent<HTMLInputElement>, value?: number) => void
+
+ | \- | \- |
+| readOnly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| step | 
+
+Sets the step value of the slider.
+
+number
+
+
+
+ | 
+
+1
+
+ | Set number |
+| tickLabels | 
+
+List of labels to be displayed.
+
+union
+
+
+
+ | \- | Set object |
+| value | 
+
+Value of the slider. Used for controlled sliders.
+
+number
+
+
+
+ | \- | Set number |
+
+Examples
+--------
+
+### Default value
+
+You can set the initial value of the slider using the `defaultValue` prop. If you would like to use a controlled slider, use the `value` prop and sync it with your state using `onChange`.
+
+[](./iframe.html?id=components-slider--default-value)
+
+3
+
+```
+
+<IressSlider defaultValue\={3} />
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Initial value of the slider. Used for uncontrolled sliders.
+
+number
+
+
+
+ | \- |  |
+| formatValue | 
+
+Format the changed value.
+
+( value: number, tick?: SliderTickLabelValue, readOnly?: boolean, ) => ReactNode
+
+ | \- | \- |
+| hiddenValueTooltip | 
+
+If `true`, the value tooltip will be hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| max | 
+
+Set the maximum value for the slider.
+
+number
+
+
+
+ | 
+
+10
+
+ | Set number |
+| min | 
+
+Sets minimum value for the slider.
+
+number
+
+
+
+ | 
+
+0
+
+ | Set number |
+| name | 
+
+The name of the control, which is submitted with the form data.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Emitted when the slider value changes.
+
+(e: ChangeEvent<HTMLInputElement>, value?: number) => void
+
+ | \- | \- |
+| readOnly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| step | 
+
+Sets the step value of the slider.
+
+number
+
+
+
+ | 
+
+1
+
+ | Set number |
+| tickLabels | 
+
+List of labels to be displayed.
+
+union
+
+
+
+ | \- | Set object |
+| value | 
+
+Value of the slider. Used for controlled sliders.
+
+number
+
+
+
+ | \- | Set number |
+
+### Min, max and step
+
+To change the selectable values of the default slider you can change the `min`, `max` and `step` properties.
+
+For instance, if you set `min` to 10 and `max` to 100 the user is able to select any number between 10 and 100.
+
+By setting the `step` property to 10, for example, the user will only be able to select numbers in increments of ten i.e. 10, 20, 30, 40, 50, 60, 70, 80, 90, 100; as shown in the below example.
+
+[](./iframe.html?id=components-slider--min-max-and-step)
+
+10
+
+```
+
+<IressSlider
+  max\={100}
+  min\={10}
+  step\={10}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Initial value of the slider. Used for uncontrolled sliders.
+
+number
+
+
+
+ | \- | Set number |
+| formatValue | 
+
+Format the changed value.
+
+( value: number, tick?: SliderTickLabelValue, readOnly?: boolean, ) => ReactNode
+
+ | \- | \- |
+| hiddenValueTooltip | 
+
+If `true`, the value tooltip will be hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| max | 
+
+Set the maximum value for the slider.
+
+number
+
+
+
+ | 
+
+10
+
+ |  |
+| min | 
+
+Sets minimum value for the slider.
+
+number
+
+
+
+ | 
+
+0
+
+ |  |
+| name | 
+
+The name of the control, which is submitted with the form data.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Emitted when the slider value changes.
+
+(e: ChangeEvent<HTMLInputElement>, value?: number) => void
+
+ | \- | \- |
+| readOnly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| step | 
+
+Sets the step value of the slider.
+
+number
+
+
+
+ | 
+
+1
+
+ |  |
+| tickLabels | 
+
+List of labels to be displayed.
+
+union
+
+
+
+ | \- | Set object |
+| value | 
+
+Value of the slider. Used for controlled sliders.
+
+number
+
+
+
+ | \- | Set number |
+
+### Ticks and labels
+
+It is also possible to include ticks and labels for selectable values. This can be done by using the `tickLabels` property and providing an array of numbers and/or `TickLabel` objects.
+
+The `TickLabel` object takes value/label pairs. The value is required, however, an optional label property can be provided. If the label property is not specified, slider will display the value for the label.
+
+If you provide an array of `TickLabel` objects, the value tooltip (the one that appears above the slider's thumb) will use the label from its matching value.
+
+The `tickLabels` prop can also be set to true, in which case they will automatically be inferred from `min`, `max` and `step`.
+
+[](./iframe.html?id=components-slider--ticks-and-labels)
+
+Zero
+
+Zero
+
+20
+
+40
+
+60
+
+80
+
+100
+
+120
+
+140
+
+160
+
+180
+
+All
+
+```
+
+<IressSlider
+  max\={200}
+  min\={0}
+  step\={20}
+  tickLabels\={\[
+    {
+      label: 'Zero',
+      value: 0
+    },
+    {
+      value: 20
+    },
+    {
+      value: 40
+    },
+    {
+      value: 60
+    },
+    {
+      value: 80
+    },
+    {
+      value: 100
+    },
+    {
+      value: 120
+    },
+    {
+      value: 140
+    },
+    {
+      value: 160
+    },
+    {
+      value: 180
+    },
+    {
+      label: 'All',
+      value: 200
+    }
+  \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Initial value of the slider. Used for uncontrolled sliders.
+
+number
+
+
+
+ | \- | Set number |
+| formatValue | 
+
+Format the changed value.
+
+( value: number, tick?: SliderTickLabelValue, readOnly?: boolean, ) => ReactNode
+
+ | \- | \- |
+| hiddenValueTooltip | 
+
+If `true`, the value tooltip will be hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| max | 
+
+Set the maximum value for the slider.
+
+number
+
+
+
+ | 
+
+10
+
+ |  |
+| min | 
+
+Sets minimum value for the slider.
+
+number
+
+
+
+ | 
+
+0
+
+ |  |
+| name | 
+
+The name of the control, which is submitted with the form data.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Emitted when the slider value changes.
+
+(e: ChangeEvent<HTMLInputElement>, value?: number) => void
+
+ | \- | \- |
+| readOnly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| step | 
+
+Sets the step value of the slider.
+
+number
+
+
+
+ | 
+
+1
+
+ |  |
+| tickLabels | 
+
+List of labels to be displayed.
+
+union
+
+
+
+ | \- | 
+
+RAW
+
+*   tickLabels :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 1 key
+        
+    *   2 :
+        
+        {...} 1 key
+        
+    *   3 :
+        
+        {...} 1 key
+        
+    *   4 :
+        
+        {...} 1 key
+        
+    *   5 :
+        
+        {...} 1 key
+        
+    *   6 :
+        
+        {...} 1 key
+        
+    *   7 :
+        
+        {...} 1 key
+        
+    *   8 :
+        
+        {...} 1 key
+        
+    *   9 :
+        
+        {...} 1 key
+        
+    *   10 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| value | 
+
+Value of the slider. Used for controlled sliders.
+
+number
+
+
+
+ | \- | Set number |
+
+### Flexible ticks and labels
+
+As of version 5, `min`, `max` and `step` is no longer automatically inferred from `tickLabels`, allowing you to have more flexible `tickLabels`.
+
+You can also use the `formatValue` prop to provide a formatted node to replace the value tooltip.
+
+[](./iframe.html?id=components-slider--flexible-ticks-and-labels)
+
+\-10°C
+
+0°C  
+Hypothermia
+
+37°C  
+Normal
+
+45°C  
+Wicked witch  
+of the west
+
+```
+
+<IressSlider
+  min\={\-10}
+  max\={50}
+  formatValue\={(value) \=> \`${value}°C\`}
+  tickLabels\={\[
+    { value: 0, label: <\>0°C <br />Hypothermia</\> },
+    { value: 37, label: <\>37°C <br />Normal</\> },
+    { value: 45, label: <\>45°C <br />Wicked witch<br />of the west</\> },
+  \]}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Initial value of the slider. Used for uncontrolled sliders.
+
+number
+
+
+
+ | \- | Set number |
+| formatValue | 
+
+Format the changed value.
+
+( value: number, tick?: SliderTickLabelValue, readOnly?: boolean, ) => ReactNode
+
+ | \- | \- |
+| hiddenValueTooltip | 
+
+If `true`, the value tooltip will be hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| max | 
+
+Set the maximum value for the slider.
+
+number
+
+
+
+ | 
+
+10
+
+ |  |
+| min | 
+
+Sets minimum value for the slider.
+
+number
+
+
+
+ | 
+
+0
+
+ |  |
+| name | 
+
+The name of the control, which is submitted with the form data.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Emitted when the slider value changes.
+
+(e: ChangeEvent<HTMLInputElement>, value?: number) => void
+
+ | \- | \- |
+| readOnly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| step | 
+
+Sets the step value of the slider.
+
+number
+
+
+
+ | 
+
+1
+
+ | Set number |
+| tickLabels | 
+
+List of labels to be displayed.
+
+union
+
+
+
+ | \- | 
+
+RAW
+
+*   tickLabels :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| value | 
+
+Value of the slider. Used for controlled sliders.
+
+number
+
+
+
+ | \- | Set number |
+
+### Hidden labels
+
+Specific labels can be hidden for all or specified breakpoints. This can be done by using the `srOnly` property in the `TickLabel` object.
+
+When a label is set to hide on a certain breakpoint, it will be hidden on the screen from that breakpoint onwards. You can reveal it on a larger breakpoint by setting the larger breakpoint to false.
+
+1.  To set the label to hide on all breakpoints you can set the xs property to true: `srOnly: { xs: true }`.
+2.  To only show on md and above you can `srOnly: { xs: true, md: false }`.
+
+#### Behavior considerations
+
+*   The labels will always be available to screen readers to ensure best accessibility, as screen readers are not confined by screen space.
+*   The `ticksAndLabels` prop will still be used to match the `value` of the slider, even if its been set to be hidden on the user's screen.
+
+[](./iframe.html?id=components-slider--hidden-labels)
+
+**xl** breakpoint (1200px - 1499px)
+
+Zero
+
+Zero
+
+20
+
+40
+
+60
+
+80
+
+100
+
+120
+
+140
+
+160
+
+180
+
+All
+
+```
+
+<IressStack gap\="md"\>
+  <IressPanel bg\="alt"\>
+    <IressText\>
+      <kn />
+    </IressText\>
+  </IressPanel\>
+  <IressSlider
+    max\={200}
+    min\={0}
+    step\={20}
+    tickLabels\={\[
+      {
+        label: 'Zero',
+        value: 0
+      },
+      {
+        srOnly: {
+          base: true,
+          xl: false
+        },
+        value: 20
+      },
+      {
+        srOnly: {
+          base: true,
+          xl: false
+        },
+        value: 40
+      },
+      {
+        srOnly: {
+          base: true,
+          xl: false
+        },
+        value: 60
+      },
+      {
+        srOnly: {
+          base: true,
+          xl: false
+        },
+        value: 80
+      },
+      {
+        value: 100
+      },
+      {
+        srOnly: {
+          base: true,
+          xl: false
+        },
+        value: 120
+      },
+      {
+        srOnly: {
+          base: true,
+          xl: false
+        },
+        value: 140
+      },
+      {
+        srOnly: {
+          base: true,
+          xl: false
+        },
+        value: 160
+      },
+      {
+        srOnly: {
+          base: true,
+          xl: false
+        },
+        value: 180
+      },
+      {
+        label: 'All',
+        value: 200
+      }
+    \]}
+  />
+</IressStack\>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Initial value of the slider. Used for uncontrolled sliders.
+
+number
+
+
+
+ | \- | Set number |
+| formatValue | 
+
+Format the changed value.
+
+( value: number, tick?: SliderTickLabelValue, readOnly?: boolean, ) => ReactNode
+
+ | \- | \- |
+| hiddenValueTooltip | 
+
+If `true`, the value tooltip will be hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| max | 
+
+Set the maximum value for the slider.
+
+number
+
+
+
+ | 
+
+10
+
+ |  |
+| min | 
+
+Sets minimum value for the slider.
+
+number
+
+
+
+ | 
+
+0
+
+ |  |
+| name | 
+
+The name of the control, which is submitted with the form data.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Emitted when the slider value changes.
+
+(e: ChangeEvent<HTMLInputElement>, value?: number) => void
+
+ | \- | \- |
+| readOnly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| step | 
+
+Sets the step value of the slider.
+
+number
+
+
+
+ | 
+
+1
+
+ |  |
+| tickLabels | 
+
+List of labels to be displayed.
+
+union
+
+
+
+ | \- | 
+
+RAW
+
+*   tickLabels :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    *   2 :
+        
+        {...} 2 keys
+        
+    *   3 :
+        
+        {...} 2 keys
+        
+    *   4 :
+        
+        {...} 2 keys
+        
+    *   5 :
+        
+        {...} 1 key
+        
+    *   6 :
+        
+        {...} 2 keys
+        
+    *   7 :
+        
+        {...} 2 keys
+        
+    *   8 :
+        
+        {...} 2 keys
+        
+    *   9 :
+        
+        {...} 2 keys
+        
+    *   10 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| value | 
+
+Value of the slider. Used for controlled sliders.
+
+number
+
+
+
+ | \- | Set number |
+
+### Read only
+
+Sliders can be set to read only by using the `readOnly` property. When set to read only the slider will render a read only input and display the specified value.
+
+If you need more control over the read-only state (for example, rendering a stylised version of the value), you can use the [`IressReadonly` component](?path=/docs/components-readonly--docs).
+
+[](./iframe.html?id=components-slider--read-only)
+
+Zero
+
+```
+
+<IressSlider
+  max\={200}
+  min\={0}
+  readOnly
+  step\={20}
+  tickLabels\={\[
+    {
+      label: 'Zero',
+      value: 0
+    },
+    {
+      label: 'All',
+      value: 200
+    }
+  \]}
+  value\={0}
+/>
+
+```
+
+#### Props
+
+| Name | Description | Default | Control |
+| --- | --- | --- | --- |
+| defaultValue | 
+Initial value of the slider. Used for uncontrolled sliders.
+
+number
+
+
+
+ | \- | Set number |
+| formatValue | 
+
+Format the changed value.
+
+( value: number, tick?: SliderTickLabelValue, readOnly?: boolean, ) => ReactNode
+
+ | \- | \- |
+| hiddenValueTooltip | 
+
+If `true`, the value tooltip will be hidden.
+
+boolean
+
+
+
+ | \- | Set boolean |
+| max | 
+
+Set the maximum value for the slider.
+
+number
+
+
+
+ | 
+
+10
+
+ |  |
+| min | 
+
+Sets minimum value for the slider.
+
+number
+
+
+
+ | 
+
+0
+
+ |  |
+| name | 
+
+The name of the control, which is submitted with the form data.
+
+string
+
+
+
+ | \- | Set string |
+| onChange | 
+
+Emitted when the slider value changes.
+
+(e: ChangeEvent<HTMLInputElement>, value?: number) => void
+
+ | \- | \- |
+| readOnly | 
+
+If `true`, the user cannot modify the value.
+
+boolean
+
+
+
+ | \- | FalseTrue |
+| step | 
+
+Sets the step value of the slider.
+
+number
+
+
+
+ | 
+
+1
+
+ |  |
+| tickLabels | 
+
+List of labels to be displayed.
+
+union
+
+
+
+ | \- | 
+
+RAW
+
+*   tickLabels :
+    
+    \[
+    
+    *   0 :
+        
+        {...} 2 keys
+        
+    *   1 :
+        
+        {...} 2 keys
+        
+    
+    \]
+    
+
+
+
+ |
+| value | 
+
+Value of the slider. Used for controlled sliders.
+
+number
+
+
+
+ | \- |  |