Sliders
Sliders are used to allow users to select a value from a range. They can be used in forms, settings, and anywhere else where a range selection is needed. Corncob sliders are standard HTML range inputs styled to fit the Corncob design system.
Default Sliders
<div class="corn-slider">
<label for="slider">Adjust the Corn Slider:</label>
<input type="range" min="0" max="100" value="50" id="slider" name="corn-slider" />
</div>Size Modifiers
The default size for the slider is md, but it can be modified to xs, sm, lg, or xl using the corresponding class on the corn-slider element.
corn-slider--xscorn-slider--smcorn-slider--mdcorn-slider--lgcorn-slider--xl
Extra Small (xs)
The xs size is the smallest size available for sliders. It is designed for use in compact spaces where a smaller input field is needed.
This should not be used as the default size for sliders, but it can be used in specific contexts where space is limited, such as in a table or a navigation bar.
<div class="corn-slider corn-slider--xs">
<label for="slider--xs">Adjust the Corn Slider:</label>
<input type="range" min="0" max="100" value="50" id="slider--xs" name="corn-slider--xs" />
</div>Small (sm)
The sm size is slightly larger than xs and is suitable for use in situations where a smaller input field is needed, but there is more space available than for the xs size. It can be used in forms where space is limited, such as in a sidebar or a mobile layout.
<div class="corn-slider corn-slider--sm">
<label for="slider--sm">Adjust the Corn Slider:</label>
<input type="range" min="0" max="100" value="50" id="slider--sm" name="corn-slider--sm" />
</div>Medium (md)
The md size is the default size for sliders. It is suitable for use in most situations and is the recommended size for general use.
<div class="corn-slider corn-slider--md">
<label for="slider--md">Adjust the Corn Slider:</label>
<input type="range" min="0" max="100" value="50" id="slider--md" name="corn-slider--md" />
</div>Large (lg)
The lg size is larger than the default md size and is suitable for use in situations where a larger input field is needed, such as in a desktop layout or a settings page.
<div class="corn-slider corn-slider--lg">
<label for="slider--lg">Adjust the Corn Slider:</label>
<input type="range" min="0" max="100" value="50" id="slider--lg" name="corn-slider--lg" />
</div>Extra Large (xl)
The xl size is the largest size available for sliders. It is designed for use in situations where an extra large input field is needed. Let us know when you find a good use for this size, as it is not commonly needed and we want to make sure it is worth including in the package.
<div class="corn-slider corn-slider--xl">
<label for="slider--xl">Adjust the Corn Slider:</label>
<input type="range" min="0" max="100" value="50" id="slider--xl" name="corn-slider--xl" />
</div>Slider Tokens
:root {
--cc-slider--height--xs: var(--cc-form--item--size--xs);
--cc-slider--height--sm: var(--cc-form--item--size--sm);
--cc-slider--height--md: var(--cc-form--item--size--md);
--cc-slider--height--lg: var(--cc-form--item--size--lg);
--cc-slider--height--xl: var(--cc-form--item--size--xl);
--cc-slider--thumb--size--xs: var(--cc-size-1);
--cc-slider--thumb--size--sm: var(--cc-size-1);
--cc-slider--thumb--size--md: var(--cc-size-2);
--cc-slider--thumb--size--lg: var(--cc-size-3);
--cc-slider--thumb--size--xl: var(--cc-size-4);
--cc-slider--font-size--md: var(--cc-size-0);
--cc-slider--font-size--xs: var(--cc-size-0);
--cc-slider--font-size--sm: var(--cc-size--1);
--cc-slider--font-size--lg: var(--cc-size-0);
--cc-slider--font-size--xl: var(--cc-size-1);
--cc-slider--thumb--background: var(--cc-form--widget--color);
--cc-slider--thumb--background--border: var(--cc-blue-20);
--cc-slider--thumb--background--hover: var(--cc-form--widget--color--hover);
--cc-slider--thumb--focus--box-shadow: var(--cc-form--item--focus-ring);
--cc-slider--thumb--border-radius: var(--cc-border--radius--round);
--cc-slider--track--background: rgb(from var(--cc-gray-20) r g b / 40.2%);
--cc-slider--border: var(--cc-form--item--border);
--cc-slider--border-radius: var(--cc-border--radius);
--cc-slider--border-width: var(--cc-border--width);
--cc-slider--border-style: var(--cc-border--style);
--cc-slider--border-color: var(--cc-gray-40);
--cc-slider--box-shadow: var(--cc-shadow--drop);
}