Как можно доработать калькулятор на сайте, что бы подключить "бегунок" datalist, к функции основных вычислений

[Ron2]

Здравствуйте. Подскажите пожалуйста, как решить такой вопрос, у меня на сайте есть небольшой калькулятор, который делает вычисления общей суммы после выбора опций нескольких опций. Я хотел бы добавить (для удобства) вот такой "бегунок" datalist состоящий из 10-и позиций:

<datalist id="rangeList">
<option value="4" label="4">
<option value="5" label="5">
<option value="6" label="6">
<option value="7" label="7">
<option value="8" label="8">
<option value="9" label="9">
<option value="10" label="10">
<option value="11" label="11">
<option value="12" label="12">
<option value="13" label="13">
<option value="14" label="14">
<option value="15" label="15">
</datalist>

и что бы при передвижении его общая сумма вычислений менялась автоматически при каждом шаге передвижения этого бегунка на значение value="0_+100". как можно правильно добавить class="", id="", name="" в option value этого datalist, что бы производились вычисления. Вот фрагмент кода этого калькулятора:

<div class="heady">
<input type="hidden" name="invote" class="invote">
<select name="srok" class="inputbox headnot">
<option value="0" sumfor="headnot">Выберите кол-во эффектов</option>
<option value="0_*1" sumup="10">1 эффект</option>
<option value="0_*1.5" sumup="20">2 эффекта</option>
<option value="0_*1.9" sumup="50">3 эффекта</option>
<option value="0_*2.4" sumup="70" >4 эффекта</option>
<option value="0_*3.0" sumup="100">5 эффектов</option>
<option value="0_*3.7" sumup="200">6 эффектов</option>
<option value="0_*4.5" sumup="300">7 эффектов</option>
<option value="0_*5.4" sumup="400">8 эффектов</option>
<option value="0_*6.5" sumup="500">9 эффектов</option>
</select>
<div class="heady">
<select name="sel[]" class="inputbox plag">
<option value="0_+0" sumend="0" class="headnot">Выберите опции вставки текста</option>
<option value="0_+0" sumend="0" class="headnot">Мне не нужно показывать текст</option>
<option value="0_+500"  sumend="0" class="headnot">Вставка вашего текста в кол-ве, как в примере</option>
<option value="0_+800"  sumend="0" class="headnot">Вставка вашего текста более 30-50% чем в примере</option>
<option value="0_+1000"  sumend="0" class="headnot">Вставка вашего текста более 50-80% чем в примере</option>
<option value="0_+1200"  sumend="0" class="headnot">Вставка вашего текста более 50-80% чем в примере</option>
</select>
</div>
<div class="count variant">
<input type="hidden" name="countone" class="countone" value="promt">
<label class="myCheckbox"><input type="radio"  class="plat" name="plat" value="0_+0" checked="checked"><span class="chk"></span>Нет</label>
<label style="color: #0823C0" class="myCheckbox"><input type="radio" class="plat" name="plat" value="0_+200"><span class="chk"></span>SD карта</label>
<label style="color: #0823C0" class="myCheckbox"><input type="radio" class="plat" name="plat" value="0_+300"><span class="chk"></span>DVD запись</label></div>

[klierik]

Здравствуйте. Для решения этой задачи Вам потребуется что-то такое: https://jqueryui.com/slider/#range

[Ron2]

Спасибо вам за совет, он конечно бы устроил меня, но ситуация, такая, что он должен работать вместе с другими пунктами калькулятора, применимо к datalist. Если у вас есть совет как можно правильно их встроить id, class, name, value в datalist что бы заработал по аналогии с 

<input type="hidden" name="countone" class="countone" value="promt">
<label class="myCheckbox"><input type="radio"  class="plat" name="plat" value="0_+0" checked="checked"><span class="chk">

[klierik]

Вам требуется интегрировать данное решение в свою среду.

При инициализации передайте значения min/max: https://api.jqueryui.com/slider/#option-min
А событие "change" позволит отлавливать изменения положения ползунка и делать просчёты: https://api.jqueryui.com/slider/#event-change

[Ron2]

Благодарю за содействие, но мне не подходит ваша подсказка - работы с содержимым скриптов. Все гораздо проще может же datalist работать вместе с другими "похожими" пунктами калькулятора, применимо к option value="0_+500"  sumend="0" class="headnot", и скорее всего можно просто встроить id, class, name, value в datalist что бы заработал по аналогии с  указанным мной куском html кода в одном из этих <div>. В калькуляторе вычисления все однотипные, и этот datalist будет просто добавлять option value="" к конечной сумме всех остальных пунктов выбора опций калькулятора.

[klierik]

То есть, в ответ Вы хотите получить готовое решение на предоставленную вышеизложенную информацию?

[Ron2]

4 часа назад, klierik сказал:

То есть, в ответ Вы хотите получить готовое решение на предоставленную вышеизложенную информацию?

Я не понимаю, почему никто не представляет, что мне требуется. Я просто хочу подсказку, как мне действовать, что бы добавить новый блок в калькуляторе. Для спецов это же так просто. А дальше я сам доработаю. Все отправляют в "скрипты". Они здесь ни при чем. В этот код я добавлял уже в html доп. блоки по тэгу select. А в этом случае мне нужно добавить по тэгу datalist. Если есть идеи, то подскажите как примерно это можно в datalist прописать.

[klierik]

Мне кажется ситуация несколько иначе — Вы не понимаете ответов на свои вопросы. А сами вопросы против — понятны. Попробуем разобраться.

2 часа назад, Ron2 сказал:

Я просто хочу подсказку, как мне действовать, что бы добавить новый блок в калькуляторе. Для спецов это же так просто.

Я вам предоставил не просто подсказку, а больше — пример реализации. Не решение.
В данный момент я не представляю Вашу задачу, не могу её визуализировать, тем самым не предоставляю себе возможным дополнить свой ответ.

Мне не известно что Вы подразумеваете под термином "блок". Так же не знаю как выглядит Ваш калькулятор и какую задачу он выполняет. Не представляю как он реализован и какими возможностями владеет.

С виду поставленная вами задача проста, потому и её решение предлагается наиболее простое.

2 часа назад, Ron2 сказал:

Все отправляют в "скрипты". Они здесь ни при чем.

Беря во внимание тематику текущего ресурса, ожидается что Ваша реализация написана на скрипте JavaScript, так как о другом сказано не было. Вы хотите расширить возможности модуля, которые выполняет известную лишь Вам задачу. Именно по этому логично предложить такой путь для решения данной проблемы.

Если Вы утверждаете что скрипты тут не причём — то я не могу себе представить, каким же образом реализован обсуждаемый модуль.

2 часа назад, Ron2 сказал:

В этот код я добавлял уже в html доп. блоки по тэгу select. А в этом случае мне нужно добавить по тэгу datalist. Если есть идеи, то подскажите как примерно это можно в datalist прописать.

Не понятно о каком именно коде идёт речь. Более того — то, как Вы изъясняете поставленную задачу крайне не информативно. У меня складывается ощущение, что Вы используете техническую терминологию, которой не владеете. То есть — такая поставка задача не информативна.