mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(slider): add fullWidth prop

Browse source
This commit is contained in:
Eric Liu 2022-06-18 06:12:19 -07:00
commit ecc4e521bb
1 changed files with 10 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/Slider/Slider.svelte
View file

@ -35,6 +35,12 @@
/** Set to `true` to hide the text input */ /** Set to `true` to hide the text input */
export let hideTextInput = false; 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 */ /** Set an id for the slider div element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
@ -143,7 +149,10 @@
{labelText} {labelText}
</slot> </slot>
</label> </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> <span class:bx--slider__range-label="{true}">{minLabel || min}</span>
<div <div
bind:this="{ref}" bind:this="{ref}"