mtd/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Run prettier

Browse Source
This commit is contained in:
venashial
2022-06-04 00:46:23 -07:00
parent 597c071c3d
commit c9ec9f14de
49 changed files with 1515 additions and 1469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/package/components/Slider.svelte
View File

@@ -1,48 +1,48 @@
<script lang="ts">
export let value: number;
export let min: number;
export let max: number;
export let id: string = undefined;
export let value: number
export let min: number
export let max: number
export let id: string = undefined
</script>
<div class="slider">
<input class="slider-input" type="range" name={id} {min} {max} bind:value />
<span>{value}</span>
<input class="slider-input" type="range" name={id} {min} {max} bind:value />
<span>{value}</span>
</div>
<style lang="postcss">
.slider {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
.slider {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
.slider-input {
-webkit-appearance: none;
appearance: none;
border-radius: var(--rounded-sm);
box-shadow: var(--shadow-inset-sm);
background-color: var(--color-button-bg);
border: none;
padding: 0.25rem 0;
width: 20rem;
height: 0.5rem;
max-width: 100%;
cursor: pointer;
.slider-input {
-webkit-appearance: none;
appearance: none;
border-radius: var(--rounded-sm);
box-shadow: var(--shadow-inset-sm);
background-color: var(--color-button-bg);
border: none;
padding: 0.25rem 0;
width: 20rem;
height: 0.5rem;
max-width: 100%;
cursor: pointer;
&::-webkit-slider-thumb {
cursor: ew-resize;
-webkit-appearance: none;
appearance: none;
width: 0.5rem;
height: 1.25rem;
border-radius: var(--rounded-sm);
background-color: var(--color-brand);
&::-webkit-slider-thumb {
cursor: ew-resize;
-webkit-appearance: none;
appearance: none;
width: 0.5rem;
height: 1.25rem;
border-radius: var(--rounded-sm);
background-color: var(--color-brand);
&:hover {
background-color: var(--color-brand-dark);
}
}
}
}
&:hover {
background-color: var(--color-brand-dark);
}
}
}
}
</style>