Как создать несколько ползунков с несколькими диапазонами с соответствующим текстовым полем?

Я пытаюсь работать с многодиапазонными ползунками, где у каждого ползунка есть соответствующее текстовое поле, которое динамически показывает измененное значение.

Проблема, с которой я столкнулся, заключается в том, что если я изменю один ползунок, значения будут изменены в других текстовых полях, также обратитесь к приложенному изображению. Как связать ползунок и его соответствующее текстовое поле, чтобы достичь результата, например, если я перетащу ползунок, значение должно измениться только в его соответствующем текстовом поле и то же самое с другими ползунками

ниже код:

<!DOCTYPE html>
<html lang = "en">
<head>
    <title>colResizable &#8211; range slider demo</title>  
    <link rel = "stylesheet" type = "text/css" href = "css/main.css" />  
    <script 
 src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"> 
    </script>
    <script  src = "js/jquery.js"></script>
    <script  src = "../../colResizable-1.6.js"></script>
    <script type = "text/javascript">

    $(function(){   

    //callback function
    var onSlide = function(e){
        var columns = $(e.currentTarget).find("td");
        var ranges = [], total = 0, i, s  = "Ranges: ", w;
        for(i = 0; i<columns.length; i++){
            w = columns.eq(i).width()-10 - (i==0?1:0);
            ranges.push(w);
            total+=w;
        }        
        for(i=0; i<columns.length; i++){            
            ranges[i] = 100*ranges[i]/total;
            carriage = ranges[i]-w
            s+ = " "+ Math.round(ranges[i]) + "%,";           
        }       
        s=s.slice(0,-1);            
        //$("[text]").html(s);
        document.getElementById("text").innerHTML = s;
    }

    //colResize the table
    $(".range").colResizable({
        liveDrag:true, 
        draggingClass:"rangeDrag", 
        gripInnerHtml:"<div class='rangeGrip'></div>", 
        onResize:onSlide,
        minWidth:8

    });         
}); 
</script>

</head>
<body>
<div class = "center">
    <br/><br/>
    <p>Slider 1</p>
    <div id = "slider">        
        <table class = "range" width = "100%" cellspacing = "0" cellpadding = "0">
            <tr>
                <td width = "25%"></td>
                <td width = "25%"></td>
                <td width = "25%"></td>
                <td width = "25%"></td>
            </tr>
        </table>    
        <p id = "text">Ranges: 25%, 25%, 25%, 25% </p>        
    </div>


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

    <p>Slider 2</p>
    <div id = "slider">        
        <table class = "range" width = "100%" cellspacing = "0" cellpadding = "0">
            <tr>
                <td width = "25%"></td>
                <td width = "25%"></td>
                <td width = "25%"></td>
                <td width = "25%"></td>
            </tr>
        </table>
        <p id = "text">Ranges: 25%, 25%, 25%, 25% </p>    
    </div>
</div>  

</body>
</html>


main.css

body{
background-color: white;
text-align:center;
}

.center{
text-align:left;
margin-left: auto;
margin-right: auto; 
width:575px;
}

.range{
border:none;
height:37px;
}


#slider:before{
display:block;
background-image: url('../img/rangeBar.png');   
background-position:0px 10px;
background-repeat: repeat-x;
margin-left:9px;
width:560px;
height:30px;
position:relative;
position:absolute;
content:""
}


#range td{
border:none;
}

.rangeGrip{
width:10px;
height:19px;
cursor:e-resize;
background-image: url('../img/slider.png');
z-index:8;
}


.rangeDrag .rangeGrip, .rangeGrip:hover{
background-position:right;
}

#text{
color:#034a92;
float:right;
}

было бы неплохо, если бы вы могли добавить эту скрипку jsfiddle.net, это будет полезно для других

— 17.04.2018 13:06

javascript jquery html css

17.04.2018 12:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

690

Ответы 2

Для этого есть несколько решений, все зависит от ума.

У меня есть два решения твоей проблемы

1) Если часть текстового представления (текстовое поле / абзац) находится внутри ползунка div

а) найдите элемент в слайдере и обновляйте его по мере обновления

  document.getElementById("text").innerHTML = s;
  $(this).find("p").html(s);

2) Если вы хотите отделить слайдер от части просмотра

а) создать часть просмотра с другим идентификатором

б) на слайдере div создать фиктивный атрибут, который может иметь вид data-view = "view part id"

c) в функции события просто получите это значение атрибута data-view для ползунка и загрузите на него html.

18.04.2018 10:40

Посмотрите мой слайдер, который я написал для личного пользования некоторое время назад. Он имеет реализации как линейный, так и круговой, он легкий (~ 5 КБ, написан на простом JS) и полностью настраиваемый.