0

Есть работающий код выводящий три ползунка и три счетчика рядом

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

const controller = document.querySelector('.range');
const controller2 = document.querySelector('.range2');
const controller3 = document.querySelector('.range3');
const radialProgress = document.querySelector('.RadialProgress');
const radialProgress2 = document.querySelector('.RadialProgress2');
const radialProgress3 = document.querySelector('.RadialProgress3');
const setProgress = progress => {
  const value = `${progress}%`;
  controller.style.setProperty('--progress', value);
  radialProgress.innerHTML = value;
  radialProgress.setAttribute('aria-valuenow', value);
};
const setProgress2 = progress => {
  const value = `${progress}%`;
  controller2.style.setProperty('--progress2', value);
  radialProgress2.innerHTML = value;
  radialProgress2.setAttribute('aria-valuenow2', value);
};
const setProgress3 = progress => {
  const value = `${progress}%`;
  controller3.style.setProperty('--progress3', value);
  radialProgress3.innerHTML = value;
  radialProgress3.setAttribute('aria-valuenow3', value);
};
setProgress(controller.value);
controller.oninput = () => {
  setProgress(controller.value);
};
setProgress2(controller2.value);
controller2.oninput = () => {
  setProgress2(controller2.value);
};
setProgress3(controller3.value);
controller3.oninput = () => {
  setProgress3(controller3.value);
};
<input type="range" value="90" min="0" max="100" class="range">
<div class="RadialProgress" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
</div>
<input type="range" value="90" min="0" max="100" class="range2">
<div class="RadialProgress2" role="progressbar" aria-valuenow2="90" aria-valuemin="0" aria-valuemax="100">
</div>
<input type="range" value="90" min="0" max="100" class="range3">
<div class="RadialProgress3" role="progressbar" aria-valuenow3="90" aria-valuemin="0" aria-valuemax="100">
</div>

2 ответа 2

1

Если вопрос именно про JS часть, имею ввиду что сколько в вёрстке элементов будет вы условно не знаете, тогда можно так:

const controllers = document.querySelectorAll('[class^=range]');
const radialProgresses = document.querySelectorAll('[class^=RadialProgress]');

const setProgress = (progress, index) => {
  const value = `${progress}%`;
  const postfix = index ? index : '';
  controllers[index].style.setProperty(`--progress${postfix}`, value);
  radialProgresses[index].innerHTML = value;
  radialProgresses[index].setAttribute(`aria-valuenow${postfix}`, value);
}

controllers.forEach((controller, index) => {
  setProgress(controller.value, index);

  controller.oninput = () => {
    setProgress(controller.value, index);
  };
})
<input type="range" value="90" min="0" max="100" class="range">
<div class="RadialProgress" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
</div>
<input type="range" value="90" min="0" max="100" class="range1">
<div class="RadialProgress1" role="progressbar" aria-valuenow1="90" aria-valuemin="0" aria-valuemax="100">
</div>
<input type="range" value="90" min="0" max="100" class="range2">
<div class="RadialProgress2" role="progressbar" aria-valuenow2="90" aria-valuemin="0" aria-valuemax="100">
</div>

7
  • Спасибо добрый человек, все работает. Если не трудно расскажи что в этом коде делается const setProgress = (progress, index) => { const value = ${progress}%; const postfix = index ? index : ''; 23 июл 2022 в 15:27
  • Я пытался с циклом тут замутить, все оказывается без него решается 23 июл 2022 в 15:35
  • Скажи пожалуйста ${progress} и ${postfix} что это? 23 июл 2022 в 15:41
  • @АлексейПетров Цикл есть - forEach. На счёт вашего вопроса: ${progress} - это я взял из вашего кода, думал вы знаете что пишите)) На счёт index ? index : '' - это работает так, что 0 в JS может быть представлен как false, следовательно для первого элемента не будет никакого индекса, но любое другое число может быть представлено как true, потому для них вернётся их же значение. Т.е. для 0 вернётся пустая строка, а для всех других само же число, для 1 вернётся 1, для 2 - 2 и т.д.
    – Mr. Man
    23 июл 2022 в 16:45
  • Если мой ответ помог вам, пожалуйста, примите его, поставив зелёную галочку слева от моего ответа
    – Mr. Man
    23 июл 2022 в 16:46
0

Можно создать функцию - например inputBlock(7), и в нее передавать количество блоков, которые нужно создать, пример ниже.

const out = document.querySelector('.out')

inputBlock(7)

function inputBlock(number) {

  let wrapper
  let input
  let divRange

  for (let i = 0; i < number; i++) {

    wrapper = document.createElement('div')
    input = document.createElement('input')
    divRange = document.createElement('div')


    input.type = 'range';
    input.classList.add('range');
    input.setAttribute('min', 0);
    input.setAttribute('max', 100);
    input.setAttribute('value', 90);

    divRange.classList.add('RadialProgress');
    divRange.setAttribute('role', 'progressbar');
    divRange.textContent = `${input.value}%`;


    wrapper.append(input)
    wrapper.append(divRange)
    out.append(wrapper)
  }

  inputClick()

}

function inputClick() {
  out.addEventListener('input', function({
    target
  }) {
    if (target.classList.contains('range')) {
      target.nextSibling.textContent = `${target.value}%`
    }
  })
}
<div class="out"></div>

P.S вариант цвет для [type="range"]

Примерно так, но я понял, что ответ другого участника вас устроил. Поэтому это для наглядности

const out = document.querySelector('.out')

inputBlock(3)

function inputBlock(number) {

  let wrapper
  let input
  let divRange

  for (let i = 0; i < number; i++) {

    wrapper = document.createElement('div')
    input = document.createElement('input')
    divRange = document.createElement('div')


    input.type = 'range';
    input.classList.add('range');
    input.classList.add('slider-progress');
    input.setAttribute('min', 0);
    input.setAttribute('max', 100);
    input.setAttribute('value', 90);

    divRange.classList.add('RadialProgress');
    divRange.setAttribute('role', 'progressbar');
    divRange.textContent = `${input.value}%`;

    wrapper.append(input)
    wrapper.append(divRange)
    out.append(wrapper)
  }

  const progress = document.querySelectorAll('.slider-progress')

  inputClick()
  inputColor(progress)

}

function inputClick() {
  out.addEventListener('input', function({
    target
  }) {
    if (target.classList.contains('range')) {
      target.nextSibling.textContent = `${target.value}%`
    }
  })
}

function inputColor(progress) {
  for (let e of progress) {
    e.style.setProperty('--value', e.value);
    e.style.setProperty('--min', e.min == '' ? '0' : e.min);
    e.style.setProperty('--max', e.max == '' ? '100' : e.max);
    e.addEventListener('input', () => e.style.setProperty('--value', e.value));
  }
}
.range {
  width: 100%;
}


/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/

input[type=range].range {
  height: 1em;
  -webkit-appearance: none;
}


/*progress support*/

input[type=range].range.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 1.5em + var(--ratio) * (100% - 1.5em));
}

input[type=range].range:focus {
  outline: none;
}


/*webkit*/

input[type=range].range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 1em;
  background: #007CF8;
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: calc(max((0.4em - 1px - 1px) * 0.5, 0px) - 1.5em * 0.5);
}

input[type=range].range::-webkit-slider-runnable-track {
  height: 0.4em;
  border: 1px solid #b2b2b2;
  border-radius: 0.5em;
  background: #EFEFEF;
  box-shadow: none;
}

input[type=range].range:hover::-webkit-slider-runnable-track {
  border-color: #9a9a9a;
}

input[type=range].range:active::-webkit-slider-runnable-track {
  border-color: #c1c1c1;
}

input[type=range].range.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #8612D5, #E510C0) 0/var(--sx) 100% no-repeat, #EFEFEF;
}


/*mozilla*/

input[type=range].range::-moz-range-thumb {
  width: 1.5em;
  height: 1.5em;
  border-radius: 1em;
  background: #007CF8;
  border: none;
  box-shadow: 0 0 2px black;
}

input[type=range].range::-moz-range-track {
  height: max(calc(0.4em - 1px - 1px), 0px);
  border: 1px solid #b2b2b2;
  border-radius: 0.5em;
  background: #EFEFEF;
  box-shadow: none;
}

input[type=range].range:hover::-moz-range-track {
  border-color: #9a9a9a;
}

input[type=range].range:active::-moz-range-track {
  border-color: #c1c1c1;
}

input[type=range].range.slider-progress::-moz-range-track {
  background: linear-gradient(to right, #8612D5, #E510C0) 0/var(--sx) 100% no-repeat, #EFEFEF;
}


/*ms*/

input[type=range].range::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].range::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].range::-ms-thumb {
  width: 1.5em;
  height: 1.5em;
  border-radius: 1em;
  background: #007CF8;
  border: none;
  box-shadow: 0 0 2px black;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].range::-ms-track {
  height: 0.4em;
  border-radius: 0.5em;
  background: #EFEFEF;
  border: 1px solid #b2b2b2;
  box-shadow: none;
  box-sizing: border-box;
}

input[type=range].range.slider-progress::-ms-fill-lower {
  height: max(calc(0.4em - 1px - 1px), 0px);
  border-radius: 0.5em 0 0 0.5em;
  margin: -1px 0 -1px -1px;
  background: linear-gradient(to right, #8612D5, #E510C0);
  border: 1px solid #b2b2b2;
  border-right-width: 0;
}
<div class="out"></div>

4
  • Тут еще в CSS файле цвет полосы меняется .range { background: -webkit-linear-gradient( left, $red 0%, $red var(--progress, 90%), #bcbcbe var(--progress, 90%), #bcbcbe 100% ); } как прикрутить эту функцию к изменению var(--progress, 90%) 23 июл 2022 в 15:32
  • @АлексейПетров добавил цвет для наглядности. Если ответ полезный - кликните стрелку вверх, слева от моего ответа 23 июл 2022 в 19:30
  • @АлександрСычёв Он не может пока что голосовать за, нужно минимум 15 репутации :)
    – Mr. Man
    23 июл 2022 в 21:23
  • 1
    @Mr.Man точно )) переживу )) 23 июл 2022 в 21:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.