.dual-range-input{--dri-height: 1.5rem;--dri-thumb-width: 1.25rem;--dri-thumb-height: 1.25rem;--dri-thumb-color: #ddd;--dri-thumb-hover-color: #a8d5ff;--dri-thumb-active-color: #4eaaff;--dri-thumb-border-color: rgba(0, 0, 0, .1);--dri-thumb-border-hover-color: var(--dri-thumb-border-color);--dri-thumb-border-active-color: var(--dri-thumb-border-color);--dri-thumb-border-radius: 1rem;--dri-thumb-border-width: 1px;--dri-track-height: .25rem;--dri-track-border-radius: 1rem;--dri-track-color: #ccc;--dri-track-filled-color: #0084ff;--dri-track-filled-gradient-mid-color: var(--dri-track-filled-color);--dri-track-filled-gradient-end-color: var(--dri-track-filled-color);display:flex;height:var(--dri-height);max-width:100%;width:100%;box-sizing:border-box;padding-inline-end:calc(var(--dri-thumb-width) * 2)}.dual-range-input:has(input:focus-visible){outline:2px solid var(--dri-thumb-active-color);outline-offset:4px;border-radius:2px}.dual-range-input input{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-radius:0;flex-basis:calc(50% + var(--dri-thumb-width));flex-shrink:0;font-size:inherit;height:100%;margin:0;min-width:var(--dri-thumb-width);outline:none}.dual-range-input input::-moz-range-track{background-color:var(--dri-track-color);background-repeat:no-repeat;box-sizing:border-box;height:var(--dri-track-height)}.dual-range-input input:first-child::-moz-range-track{border-start-start-radius:var(--dri-track-border-radius);border-end-start-radius:var(--dri-track-border-radius);background-image:linear-gradient(to right,var(--dri-track-color) var(--dri-gradient-position),var(--dri-track-filled-color) var(--dri-gradient-position),var(--dri-track-filled-gradient-mid-color))}[dir=rtl] .dual-range-input input:first-child::-moz-range-track{background-image:linear-gradient(to left,var(--dri-track-color) var(--dri-gradient-position),var(--dri-track-filled-color) var(--dri-gradient-position),var(--dri-track-filled-gradient-mid-color))}.dual-range-input input:last-child::-moz-range-track{border-start-end-radius:var(--dri-track-border-radius);border-end-end-radius:var(--dri-track-border-radius);background-image:linear-gradient(to right,var(--dri-track-filled-gradient-mid-color),var(--dri-track-filled-gradient-end-color) var(--dri-gradient-position),var(--dri-track-color) var(--dri-gradient-position))}[dir=rtl] .dual-range-input input:last-child::-moz-range-track{background-image:linear-gradient(to left,var(--dri-track-filled-gradient-mid-color),var(--dri-track-filled-gradient-end-color) var(--dri-gradient-position),var(--dri-track-color) var(--dri-gradient-position))}.dual-range-input input::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--dri-thumb-color);border-radius:var(--dri-thumb-border-radius);border:var(--dri-thumb-border-width) solid var(--dri-thumb-border-color);box-shadow:none;box-sizing:border-box;height:var(--dri-thumb-height);width:var(--dri-thumb-width);max-width:99.99%}.dual-range-input input:not([data-ready=true])::-moz-range-thumb{opacity:0}.dual-range-input input:hover::-moz-range-thumb{background-color:var(--dri-thumb-hover-color);border-color:var(--dri-thumb-border-hover-color)}.dual-range-input input:active::-moz-range-thumb{background-color:var(--dri-thumb-active-color);border-color:var(--dri-thumb-border-active-color)}.dual-range-input input:focus-visible::-moz-range-thumb{background-color:var(--dri-thumb-active-color);border-color:var(--dri-thumb-border-active-color)}.dual-range-input input::-webkit-slider-runnable-track{background-color:var(--dri-track-color);background-repeat:no-repeat;box-sizing:border-box;height:var(--dri-track-height)}.dual-range-input input:first-child::-webkit-slider-runnable-track{border-start-start-radius:var(--dri-track-border-radius);border-end-start-radius:var(--dri-track-border-radius);background-image:linear-gradient(to right,var(--dri-track-color) var(--dri-gradient-position),var(--dri-track-filled-color) var(--dri-gradient-position),var(--dri-track-filled-gradient-mid-color))}[dir=rtl] .dual-range-input input:first-child::-webkit-slider-runnable-track{background-image:linear-gradient(to left,var(--dri-track-color) var(--dri-gradient-position),var(--dri-track-filled-color) var(--dri-gradient-position),var(--dri-track-filled-gradient-mid-color))}.dual-range-input input:last-child::-webkit-slider-runnable-track{border-start-end-radius:var(--dri-track-border-radius);border-end-end-radius:var(--dri-track-border-radius);background-image:linear-gradient(to right,var(--dri-track-filled-gradient-mid-color),var(--dri-track-filled-gradient-end-color) var(--dri-gradient-position),var(--dri-track-color) var(--dri-gradient-position))}[dir=rtl] .dual-range-input input:last-child::-webkit-slider-runnable-track{background-image:linear-gradient(to left,var(--dri-track-filled-gradient-mid-color),var(--dri-track-filled-gradient-end-color) var(--dri-gradient-position),var(--dri-track-color) var(--dri-gradient-position))}.dual-range-input input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--dri-thumb-color);border-radius:var(--dri-thumb-border-radius);border:var(--dri-thumb-border-width) solid var(--dri-thumb-border-color);box-shadow:none;box-sizing:border-box;height:var(--dri-thumb-height);width:var(--dri-thumb-width);margin-top:calc(var(--dri-track-height) / 2);transform:translateY(-50%)}.dual-range-input input:not([data-ready=true])::-webkit-slider-thumb{opacity:0}.dual-range-input input:hover::-webkit-slider-thumb{background-color:var(--dri-thumb-hover-color);border-color:var(--dri-thumb-border-hover-color)}.dual-range-input input:active::-webkit-slider-thumb{background-color:var(--dri-thumb-active-color);border-color:var(--dri-thumb-border-active-color)}.dual-range-input input:focus-visible::-webkit-slider-thumb{background-color:var(--dri-thumb-active-color);border-color:var(--dri-thumb-border-active-color)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--text-color: #535359}*{box-sizing:border-box}html,body,main{min-height:100vh;min-height:100svh}body{margin:0;padding:0;font-size:1.1rem;background:#fafafa;color:#333}@media (min-width: 600px){body{padding:0 2rem}}main{max-width:40rem;margin:0 auto;background:#fff;padding:2rem 2rem 4rem}@media (min-width: 600px){main{padding:4rem 4rem 6rem;border-left:1px solid #f4f4f6;border-right:1px solid #f4f4f6}}h1,h2{margin:0;line-height:1.2}h2{margin:3rem 0 1rem}p{color:var(--text-color);max-width:25em}code{font-family:Fira Code,monospace;font-size:.9em;background:#f4f4f6;padding:.1rem .3rem;border-radius:.2rem}.links{display:flex;gap:.5rem;color:var(--text-color);margin:.5rem 0 1.5rem}a,.toggle-debug{color:#0070f3;text-decoration:none;transition:color .2s ease;padding:0;margin:0;font:inherit;background:none;border:none;cursor:pointer;text-decoration:underline;text-decoration-color:#ccc}a:hover,.toggle-debug:hover{text-decoration-color:currentColor}.values{display:flex;justify-content:space-between;margin:0;font-family:Menlo,DejaVu Sans,Courier New,monospace;font-size:.875rem;min-height:1lh}.debug .dual-range-input input{outline-offset:-1px}.debug input:first-child{outline:1px solid rgba(255,165,0,.5);--dri-track-filled-color: rgb(254, 195, 85);--dri-thumb-color: orange;--dri-thumb-hover-color: rgb(236, 154, 0);--dri-thumb-active-color: rgb(207, 134, 0)}.debug input:last-child{outline:1px solid var(--dri-thumb-hover-color)}.debug input::-moz-range-thumb{opacity:.6}.debug input::-webkit-slider-thumb{opacity:.6}.demo+.demo{margin-top:4rem}.demo--purple .dual-range-input{--dri-thumb-width: 2rem;--dri-thumb-height: 2rem;--dri-thumb-color: #ddd;--dri-thumb-active-color: #682af8;--dri-thumb-hover-color: #b697ff;--dri-track-filled-color: #682af8;--dri-track-filled-gradient-mid-color: #ec5caf;--dri-track-filled-gradient-end-color: #b697ff;--dri-height: 2rem}.demo--pink .dual-range-input{--dri-thumb-width: 2.5rem;--dri-thumb-height: 1.5rem;--dri-thumb-color: #ddd;--dri-thumb-active-color: rgb(255, 78, 178);--dri-thumb-hover-color: rgb(255, 168, 209);--dri-thumb-border-color: rgba(0, 0, 0, .1);--dri-track-height: .5rem;--dri-track-color: rgba(255, 168, 209, .1);--dri-track-filled-color: rgb(255, 78, 178);--dri-thumb-border-radius: .25rem;--dri-height: 1.5rem}.demo--thick .dual-range-input{--dri-height: 2rem;--dri-track-height: 2rem;--dri-track-color: #f1f3f1;--dri-track-filled-color: #6ee7b7;--dri-thumb-color: #34d399;--dri-thumb-hover-color: #10b981;--dri-thumb-active-color: #059669;--dri-thumb-border-color: rgba(0, 0, 0, .1);--dri-thumb-height: 2rem;--dri-thumb-width: 2rem}.demo--outline .dual-range-input{--main-color: rgb(174, 95, 203);--active-color: rgb(111, 0, 152);--dri-height: 2rem;--dri-track-height: .25rem;--dri-track-border-radius: 1rem;--dri-track-color: var(--main-color);--dri-track-filled-color: var(--main-color);--dri-thumb-color: #fff;--dri-thumb-hover-color: #fff;--dri-thumb-active-color: var(--active-color);--dri-thumb-border-color: var(--main-color);--dri-thumb-height: 2rem;--dri-thumb-width: 2rem;--dri-thumb-border-width: .25rem;--dri-thumb-border-hover-color: var(--active-color);--dri-thumb-border-active-color: var(--active-color)}.demo--outline .dual-range-input:has(input:focus-visible){outline-color:#6f009880}