"Connecting input range arc thumb to slider with curve"
Bootstrap 4.1.1 Snippet by muhittinbudak

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h2>Custom range slider with ticks</h2> <div class="range-wrap"> <!-- Ticks (lines) over slider --> <div class="ticks" id="tickContainer"> </div> <!-- Range value inside of range thumb --> <div class="range-value" id="rangeValue"></div> <!-- Range itself --> <input id="range" type="range" min="1" max="100" value="5" step="1"> </div>
body { font-family: Arial; margin: 0; min-height: 100vh; padding: 50px; box-sizing: border-box; text-align:center; } .range-wrap { position: relative; --svg:url("data:image/svg+xml;utf8, <svg width='97' height='37' viewBox='0 1.5 97 37' xmlns='http://www.w3.org/2000/svg'><path d='M0 35C14 35 13 2 48.5 2C84 2 80.5 35 97 35' fill='none' stroke='white' stroke-width='4'/></svg>") var(--p,0) 0; </svg> } /* Styling of ticks (lines) over the range */ .ticks { --sw:120px; /* control the width of the curve */ position: absolute; left: -30px; right: -30px; top: 0px; padding:0 10px; height: 50px; background: repeating-linear-gradient(to right, #D3D3D3 0 1px, transparent 1px 10px) content-box; -webkit-mask:var(--svg) /var(--sw) 50px, linear-gradient(to right, #fff calc(50% - var(--sw)/2 + 1px), transparent 0 calc(50% + var(--sw)/2 - 1px), #fff 0) right var(--p) top 38px/calc(200% - var(--sw)) 6px; -webkit-mask-repeat:no-repeat; z-index:999; } /* Styling the range */ input[type=range] { --sw:100px; /* control the width of the curve */ -webkit-appearance: none; appearance: none; margin: 20px 0 20px -20px; padding:0 20px; width: 100%; height: 60px; -webkit-mask: var(--svg) /var(--sw) 41px, linear-gradient(to right, #fff calc(50% - var(--sw)/2 + 1px), transparent 0 calc(50% + var(--sw)/2 - 1px), #fff 0) right var(--p) top 34.45px/calc(200% - var(--sw)) 4px; -webkit-mask-repeat:no-repeat; background: linear-gradient(125deg, #e0e0e0 34%, rgb(0,12,110) 100%); outline: none; } /* Range track */ input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 50px; cursor: pointer; border-radius: 25px; } input[type=range]::-moz-range-track { width: 100%; height: 50px; cursor: pointer; border-radius: 25px; } /* Range thumb */ input[type=range]::-webkit-slider-thumb { height: 60px; width: 60px; -webkit-appearance: none; appearance: none; border-radius: 50%; cursor: pointer; opacity:0; } input[type=range]::-moz-range-thumb { height: 60px; width: 60px; appearance: none; border-radius: 50%; cursor: pointer; opacity:0; } /* Range value (label) inside of range thumb */ .range-value { width: 55px; height: 55px; line-height: 60px; text-align: center; color: #fff; background: rgb(0,12,110); font-size: 18px; position: absolute; transform:translateX(-50%); top: 32px; border-radius: 50%; user-select: none; select: none; pointer-events: none; }
// Position of span that shows range value and tick curve position const tickContainer = document.querySelector('.range-wrap'); const range = document.getElementById('range'); const rangeV = document.getElementById('rangeValue'); const setValue = () => { // Span position and inner value const newValue = Number((range.value - range.min) * 100 / (range.max - range.min)); const newPosition = 30 - (newValue * 0.6); rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`; rangeV.innerHTML = `${range.value}%`; // Tick curve position tickContainer.style.setProperty('--p', `calc(${newValue}%)`); }; // Initialize setValue onload and oninput document.addEventListener("DOMContentLoaded", setValue); range.addEventListener('input', setValue);

Related: See More


Questions / Comments: