feat(slider): add fullWidth prop (#1354)

The `bx--slider` class in the `Slider` component has max-width of `40rem`. Because `$$restProps` is spread to the top-level `div` element in `Slider`, the only way to override the style is to do so globally:

```css
:global(.bx--slider-container) {
  width: 100%;
}

:global(.bx--slider) {
  max-width: none;
}
```

This adds a `fullWidth` prop that sets a full width style using inline style attributes.

COMPONENT_INDEX.md

@@ -3469,7 +3469,7 @@ None.
 ### Props
 
 | Prop name      | Required | Kind             | Reactive | Type                                    | Default value                                    | Description                                                                         |
-| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ------------------------------------------ |
+| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------- |
 | ref            | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code> | <code>null</code>                                | Obtain a reference to the HTML element                                              |
 | value          | No       | <code>let</code> | Yes      | <code>number</code>                     | <code>0</code>                                   | Specify the value of the slider                                                     |
 | max            | No       | <code>let</code> | No       | <code>number</code>                     | <code>100</code>                                 | Set the maximum slider value                                                        |
@@ -3483,6 +3483,7 @@ None.
 | disabled       | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to disable the slider                                                 |
 | light          | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to enable the light variant                                           |
 | hideTextInput  | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to hide the text input                                                |
+| fullWidth      | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` for the slider to span<br />the full width of its containing element. |
 | id             | No       | <code>let</code> | No       | <code>string</code>                     | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element                                                |
 | invalid        | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to indicate an invalid state                                          |
 | labelText      | No       | <code>let</code> | No       | <code>string</code>                     | <code>""</code>                                  | Specify the label text                                                              |

docs/src/COMPONENT_API.json

@@ -11074,6 +11074,18 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "fullWidth",
+          "kind": "let",
+          "description": "Set to `true` for the slider to span\nthe full width of its containing element.",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "id",
           "kind": "let",

docs/src/pages/components/Slider.svx

@@ -11,6 +11,12 @@ components: ["Slider", "SliderSkeleton"]
 
 <Slider />
 
+### Full width
+
+Set `fullWidth` to `true` for the slider to span the full width of its containing element.
+
+<Slider fullWidth />
+
 ### Hidden text input
 
 <Slider hideTextInput />

src/Slider/Slider.svelte

@@ -35,6 +35,12 @@
   /** Set to `true` to hide the text input */
   export let hideTextInput = false;
 
+  /**
+   * Set to `true` for the slider to span
+   * the full width of its containing element.
+   */
+  export let fullWidth = false;
+
   /** Set an id for the slider div element */
   export let id = "ccs-" + Math.random().toString(36);
 
@@ -143,7 +149,10 @@
       {labelText}
     </slot>
   </label>
-  <div class:bx--slider-container="{true}">
+  <div
+    class:bx--slider-container="{true}"
+    style="{fullWidth ? 'width: 100%' : undefined}"
+  >
     <span class:bx--slider__range-label="{true}">{minLabel || min}</span>
     <div
       bind:this="{ref}"
@@ -151,6 +160,7 @@
       tabindex="-1"
       class:bx--slider="{true}"
       class:bx--slider--disabled="{disabled}"
+      style="{fullWidth ? 'max-width: none' : undefined}"
       on:mousedown="{startDragging}"
       on:mousedown="{startHolding}"
       on:touchstart="{startHolding}"

tests/Slider.test.svelte

@@ -10,6 +10,7 @@
   max="{990}"
   maxLabel="990 MB"
   value="{100}"
+  fullWidth
 />
 
 <Slider

types/Slider/Slider.svelte.d.ts

@@ -75,6 +75,13 @@ export interface SliderProps
    */
   hideTextInput?: boolean;
 
+  /**
+   * Set to `true` for the slider to span
+   * the full width of its containing element.
+   * @default false
+   */
+  fullWidth?: boolean;
+
   /**
    * Set an id for the slider div element
    * @default "ccs-" + Math.random().toString(36)