mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36: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

38
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="{hideTextInput ? 'hidden' : inputType}"
type="{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}"
on:change="{({ target }) => { value="{value}"
value = Number(target.value); aria-label="{$$props['aria-label'] || 'Slider number input'}"
}}" disabled="{disabled}"
disabled="{disabled}" required="{required}"
value="{value}" min="{min}"
/> max="{max}"
{/if} step="{step}"
on:change="{({ target }) => {
value = Number(target.value);
}}"
data-invalid="{invalid || null}"
aria-invalid="{invalid || null}"
/>
</div> </div>
</div> </div>