html

<!--
Ok, now let’s modify that last script to allow a decimal number to the tenths (or one decimal place) ranging between 200.0 and 600.0

{[balance point - (Length / 2)]*100}/length
-->
<a href="/index.php">arrow builder</a><br />

<h4>Shaft Length</h4>
<p>From the throat of the nock to to the end of the graphite. Do not include the point.</p>

<div class="slidecontainer">
  <input type="range" min="160" max="240" value="192" class="slider" id="myRange" step="1" list="tickmarks">
  <datalist id="tickmarks">
	  <!--option value="96" label="12"></option>
	  <option value="104" label="13"></option>
	  <option value="112" label="14"></option>
	  <option value="120" label="15"></option>
	  <option value="128" label="16"></option>
	  <option value="136" label="17"></option>
	  <option value="144" label="18"></option>
	  <option value="152" label="19"></option-->
	  <option value="160" label="20"></option>
	  <option value="168" label="21"></option>
	  <option value="176" label="22"></option>
	  <option value="184" label="23"></option>
	  <option value="192" label="24"></option>
	  <option value="200" label="25"></option>
	  <option value="208" label="26"></option>
	  <option value="216" label="27"></option>
	  <option value="224" label="28"></option>
	  <option value="232" label="29"></option>
	  <option value="240" label="30"></option>
	  <!--option value="248" label="31"></option>
	  <option value="256" label="32"></option>
	  <option value="264" label="33"></option>
	  <option value="272" label="34"></option>
	  <option value="280" label="35"></option>
	  <option value="288" label="36"></option-->
  </datalist>
</div>

<!-- Existing inputs updated to type="number" -->
<input type="number" id="length" name="fname" value="" onblur="computeFOC()">
<input type="text" id="length_fraction" placeholder="" readonly>




<h4>Balance Point</h4>
<p>From the balance point to the throat of the nock.</p>

<div class="slidecontainer2">
  <input type="range" min="48" max="160" value="104" class="slider" id="myRange2" step="1" list="tickmarks2">
  <datalist id="tickmarks2">

		<!-- option value="32" label="4"></option>
		<option value="40" label="5"></option-->
		<option value="48" label="6"></option>
		<option value="56" label="7"></option>
		<option value="64" label="8"></option>
		<option value="72" label="9"></option>
		<option value="80" label="10"></option>
		<option value="88" label="11"></option>
		<option value="96" label="12"></option>
		<option value="104" label="13"></option>
		<option value="112" label="14"></option>
		<option value="120" label="15"></option>
		<option value="128" label="16"></option>
		<option value="136" label="17"></option>
		<option value="144" label="18"></option>
		<option value="152" label="19"></option>
		<option value="160" label="20"></option>
		<!--option value="160" label="21"></option>
		<option value="168" label="22"></option>
		<option value="176" label="23"></option>
		<option value="184" label="24"></option-->
	</datalist>
</div>
<!-- Additional fields for balance point -->
<input type="number" id="bp" name="fname2" value="" onblur="computeFOC()">
<input type="text" id="bp_fraction" placeholder="" readonly>


<br /><br />
<h4>FOC:</h4>
<input type="text" id="foc" placeholder="FOC" readonly>%


<br /><br /><br /><br /><br /><br /><br /><br />


<hr />
<h2>Just a whole (decimal) number example. Does not relate to above.</h2>

<div class="slidecontainer2">
  <input type="range" min="12" max="36" value="24" class="slider" id="myRange3" step=".1" list="tickmarks2">
  <datalist id="tickmarks2">
	  <option value="12" label="12"></option>
	  <option value="13" label="13"></option>
	  <option value="14" label="14"></option>
	  <option value="15" label="15"></option>
	  <option value="16" label="16"></option>
	  <option value="17" label="17"></option>
	  <option value="18" label="18"></option>
	  <option value="19" label="19"></option>
	  <option value="20" label="20"></option>
	  <option value="21" label="21"></option>
	  <option value="22" label="22"></option>
	  <option value="23" label="23"></option>
	  <option value="24" label="24"></option>
	  <option value="25" label="25"></option>
	  <option value="26" label="26"></option>
	  <option value="27" label="27"></option>
	  <option value="28" label="28"></option>
	  <option value="29" label="29"></option>
	  <option value="30" label="30"></option>
	  <option value="31" label="31"></option>
	  <option value="32" label="32"></option>
	  <option value="33" label="33"></option>
	  <option value="34" label="34"></option>
	  <option value="35" label="35"></option>
	  <option value="36" label="36"></option>
  </datalist>
</div>
<input type="text" id="demo" name="fname3" value="">

css

	input[type="range"] {
		width: 55rem;
	}
	datalist {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 56.125rem;
	}
	datalist option {
		width: 2rem
	}

javascript