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

fix(slider): use CSS to hide input if hideTextInput is true

Browse source
This commit is contained in:
Eric Y Liu 2021-03-18 15:44:34 -07:00
commit 5c14cde605
1 changed files with 22 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/Slider/Slider.svelte
View file

@ -191,21 +191,27 @@
/> />
</div> </div>
<span class:bx--slider__range-label="{true}">{maxLabel || max}</span> <span class:bx--slider__range-label="{true}">{maxLabel || max}</span>
{#if !hideTextInput}
<input <input
type="{inputType}" type="{hideTextInput ? 'hidden' : inputType}"
style="{hideTextInput ? 'display: none' : undefined}"
id="input-{id}" id="input-{id}"
aria-label="{$$props['aria-label'] || 'Slider number input'}" name="{name}"
class:bx--text-input="{true}" class:bx--text-input="{true}"
class:bx--slider-text-input="{true}" class:bx--slider-text-input="{true}"
class:bx--text-input--light="{light}" class:bx--text-input--light="{light}"
class:bx--text-input--invalid="{invalid}" class:bx--text-input--invalid="{invalid}"
value="{value}"
aria-label="{$$props['aria-label'] || 'Slider number input'}"
disabled="{disabled}"
required="{required}"
min="{min}"
max="{max}"
step="{step}"
on:change="{({ target }) => { on:change="{({ target }) => {
value = Number(target.value); value = Number(target.value);
}}" }}"
disabled="{disabled}" data-invalid="{invalid || null}"
value="{value}" aria-invalid="{invalid || null}"
/> />
{/if}
</div> </div>
</div> </div>