xxxxxxxxxx
<html>
<head>
<style>
.text-container {
max-width: 32%;
}
.button-apply {
text-align: center;
}
.text-div {
padding: 5px;
display: flex;
justify-content: space-between;
}
.text-span {
margin-left: 10px;
}
</style>
<title> </title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class="range-slider">
<svg id="svg">
<g class="axisContainer">
<g class="range-slider-axis" id="axesContainer" />
<g id="labelRef">
<text
fillColor="#808080"
class="arrow-upper-label"
x="0"
y="-10"
text=""
style="text-anchor: middle;"
/>
</g>
<g class="range-slider-arrow" id="arrowContainer">
<g id="arrowRef" />
</g>
<g class="range-slider-brush" id="brushContainer" />
</g>
</svg>
<div class="text-container">
<div class="text-div">
Step Size :<input
class="text-span"
type="text"
value="1"
id="stepSize"
/>
</div>
<div class="text-div">
Slider Size :<input
class="text-span"
type="text"
value="3"
id="sliderSize"
/>
</div>
<div class="text-div">
Initial Index :<input
class="text-span"
type="text"
value="0"
id="initialIndex"
/>
</div>
<div class="button-apply">
<input type="button" value="Apply" onclick="applyChanges()" />
</div>
</div>
<script src="./slider.js"></script>
<a
href="https://stackoverflow.com/users/7430694/chandrakant-thakkar"
style="position: absolute;top: 87%;left: 77%;"
target="_blank"
>
<img
src="https://stackoverflow.com/users/flair/7430694.png"
width="208"
height="58"
alt="profile for Chandrakant Thakkar at Stack Overflow, Q&A for professional and enthusiast programmers"
title="profile for Chandrakant Thakkar at Stack Overflow, Q&A for professional and enthusiast programmers"
/>
</a>
</div>
</body>
</html>
https://d3js.org/d3.v4.min.js