<script>
    import DoubleSlider from './DoubleSlider.svelte';
    import Slider from './Slider.svelte';
    export let subsampling = 1;
    export let up_freq_range = 90;
    export let low_freq_range = 0;
</script>
<div class="slider">
    <!-- <DoubleSlider /> -->
    <label for="range-steps1">Subsampling {subsampling}</label>
    <input type="range" id="range-steps1" min="0" max="100"  bind:value={subsampling} />
    <label for="range-steps2">Upper frequency range {up_freq_range}</label>
    <input type="range" id="range-steps2" min="0" max="100"  bind:value={up_freq_range} />
    <label for="range-steps3">Lower frequency range {low_freq_range}</label>
    <input type="range" id="range-steps3" min="0" max="100"  bind:value={low_freq_range} />
    <!-- <Slider >BUBU</Slider> -->
</div>
<style>
    .slider {
        padding-top: 5px;
    }
    input {
        width: 65%;
        float: right;
    }
    .slider {
		position: relative;
		width: 100%;
		height: 6px;
		transform: translate(0, -50%);
		background-color: #e2e2e2;
		box-shadow: inset 0 7px 10px -5px #4a4a4a, inset 0 -1px 0px 0px #9c9c9c;
		border-radius: 1px;
	}
</style>