chore: add variable descriptions

packages/bootstrap/docs/customization-slider.md

@@ -0,0 +1,388 @@
+---
+title: Customizing Slider
+description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization."
+slug: variables_kendothemebootstrap_slider
+position: 9
+---
+
+# Customizing Slider
+
+## Variables
+
+The following table lists the available variables for customization.
+
+<table class="theme-variables">
+    <colgroup>
+    <col style="width: 200px; white-space:nowrap;" />
+    <col />
+    <col />
+    <col />
+</colgroup>
+<thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Default value</th>
+        <th>Computed value</th>
+    </tr>
+</thead>
+<tbody>
+        <tr>
+    <td>$kendo-slider-size</td>
+    <td>Number</td>
+    <td><code>200px</code></td>
+    <td><code>200px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The default size of the Slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-tick-size</td>
+    <td>Null</td>
+    <td><code>null</code></td>
+    <td><code>null</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The default size of the Slider tick.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-alt-size</td>
+    <td>Number</td>
+    <td><code>30px</code></td>
+    <td><code>30px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The default size of the Slider's track wrap.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-font-family</td>
+    <td>List</td>
+    <td><code>$kendo-font-family</code></td>
+    <td><code>system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-font-size</td>
+    <td>Number</td>
+    <td><code>$kendo-font-size-md</code></td>
+    <td><code>1rem</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-line-height</td>
+    <td>Number</td>
+    <td><code>$kendo-line-height-md</code></td>
+    <td><code>1.5</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height of the Slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-button-offset</td>
+    <td>Number</td>
+    <td><code>10px</code></td>
+    <td><code>10px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The offset of the Slider Buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-button-size</td>
+    <td>Number</td>
+    <td><code>($kendo-slider-alt-size - 2)</code></td>
+    <td><code>28px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size of the Slider Buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-button-spacing</td>
+    <td>Number</td>
+    <td><code>($kendo-slider-button-size + $kendo-slider-button-offset)</code></td>
+    <td><code>38px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Slider Buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-button-focus-shadow</td>
+    <td>List</td>
+    <td><code>$kendo-button-focus-shadow</code></td>
+    <td><code>0 0 0 0.25rem rgba(228, 231, 235, 0.5)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the focused Slider Buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-track-thickness</td>
+    <td>Number</td>
+    <td><code>4px</code></td>
+    <td><code>4px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The thickness of the Slider track.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-size</td>
+    <td>Number</td>
+    <td><code>14px</code></td>
+    <td><code>14px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size of the Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-border-width</td>
+    <td>Number</td>
+    <td><code>1px</code></td>
+    <td><code>1px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border width of the Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-active-scale</td>
+    <td>Number</td>
+    <td><code>1</code></td>
+    <td><code>1</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition scale of the active Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-active-size</td>
+    <td>Null</td>
+    <td><code>null</code></td>
+    <td><code>null</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size of the active Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-bg</td>
+    <td>Color</td>
+    <td><code>$kendo-color-primary</code></td>
+    <td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-text</td>
+    <td>Color</td>
+    <td><code>if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))</code></td>
+    <td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-border</td>
+    <td>Color</td>
+    <td><code>$kendo-color-primary</code></td>
+    <td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-gradient</td>
+    <td>Null</td>
+    <td><code>null</code></td>
+    <td><code>null</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The gradient of the Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-hover-bg</td>
+    <td>Color</td>
+    <td><code>if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 7.5% ))</code></td>
+    <td><span class="color-preview" style="background-color: #025ce2"></span><code>#025ce2</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-hover-text</td>
+    <td>Color</td>
+    <td><code>if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))</code></td>
+    <td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-hover-border</td>
+    <td>Color</td>
+    <td><code>if($kendo-enable-color-system, k-color( primary-hover ), k-try-darken( $kendo-color-primary, 10% ))</code></td>
+    <td><span class="color-preview" style="background-color: #0257d5"></span><code>#0257d5</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-hover-gradient</td>
+    <td>Null</td>
+    <td><code>null</code></td>
+    <td><code>null</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The gradient of the hovered Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-pressed-bg</td>
+    <td>Color</td>
+    <td><code>if($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 10% ))</code></td>
+    <td><span class="color-preview" style="background-color: #0257d5"></span><code>#0257d5</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the active Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-pressed-text</td>
+    <td>Color</td>
+    <td><code>if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-color-primary ))</code></td>
+    <td><span class="color-preview" style="background-color: white"></span><code>white</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the active Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-pressed-border</td>
+    <td>Color</td>
+    <td><code>if($kendo-enable-color-system, k-color( primary-active ), k-try-darken( $kendo-color-primary, 12.5% ))</code></td>
+    <td><span class="color-preview" style="background-color: #0252c9"></span><code>#0252c9</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the active Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-pressed-gradient</td>
+    <td>Null</td>
+    <td><code>null</code></td>
+    <td><code>null</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The gradient of the active Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-focus-shadow</td>
+    <td>List</td>
+    <td><code>0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .5 ), rgba( $kendo-color-primary, .5 ))</code></td>
+    <td><code>0 0 0 3px rgba(13, 110, 253, 0.5)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the focused Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-transition-speed</td>
+    <td>Number</td>
+    <td><code>.3s</code></td>
+    <td><code>0.3s</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition speed of the Slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-transition-function</td>
+    <td>String</td>
+    <td><code>ease-out</code></td>
+    <td><code>ease-out</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition function of the Slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-transition-speed</td>
+    <td>Number</td>
+    <td><code>.4s</code></td>
+    <td><code>0.4s</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition speed of the Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-draghandle-transition-function</td>
+    <td>String</td>
+    <td><code>cubic-bezier(.25, .8, .25, 1)</code></td>
+    <td><code>cubic-bezier(0.25, 0.8, 0.25, 1)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The transition function of the Slider drag handle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-track-bg</td>
+    <td>Color</td>
+    <td><code>$gray-200</code></td>
+    <td><span class="color-preview" style="background-color: #e9ecef"></span><code>#e9ecef</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Slider track.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-selection-bg</td>
+    <td>Color</td>
+    <td><code>$kendo-selected-bg</code></td>
+    <td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Slider's track selection.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-slider-disabled-opacity</td>
+    <td>Null</td>
+    <td><code>null</code></td>
+    <td><code>null</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container">
+    </td>
+</tr>
+</tbody>
+</table>
+
+## Suggested Links
+
+* [Styling Overview]({% slug themesandstyles %})
+* [Web Font Icons]({% slug icons %})
+* [Preview of the Themed Components](../)
+