Hi,
https://legacy.sawtoothsoftware.com/forum/34961/automatically-moving-slider-based-number-words-open-question
I have done with the above concept using the below code. However, I don't know how to store this text box value to a free format hidden variable.
Please help to store this text box value to a free format hidden variable.
<script>
$(document).ready(function(){
// Bind "input" event to <textarea>
$('.text').on('input', wordCounter);
function wordCounter(event) {
// Get the string value of .text
const $count = $(this).val();
/*
Split that string value at every space into an array then return it's .length
*/
const words = $count.split(' ').length;
// Assign the word count value to <output> and <input>
$('.display, .slider').val(words);
}
});
</script>
<style>
html {
font: 300 2ch/1.2 'Segoe UI'
}
.box {
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: max-content;
padding-top: 12px;
border: none;
}
input,
textarea {
font: inherit;
}
.text {
width: 57.5vw;
height: 125px;
padding: 4px 8px;
resize: vertical;
}
.slider {
-webkit-appearance: none;
width: 58vw;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
transition: opacity .2s;
pointer-events: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04AA6D;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #04AA6D;
}
.display {
display: inline-flex;
justify-content: center;
align-items: center;
width: 65vw;
min-height: 25px;
font-family: Consolas;
border: none;
}
</style>
<script type="text/javascript">
alert($count);
</script>
<fieldset class="box">
<textarea class='text' rows='5'></textarea>
<td> </td>
<input class='slider' type='range' min="0" max="20" value="0" readonly>
</fieldset>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>