Adjust the initial slider according to the values displayed in the following four sliders

Having an issue updating the slider value in the first one based on selected values from four other sliders. The selected value should not exceed 50, which is the maximum value in the first slider.

Link to Working Fiddle :

Below is the HTML code :

    <div class="wrapper">
    <div class= "col-md-12">
    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" class = "col-md-8" data-slider-max="100"  data-slider-step="1" />
    <input type="text" class="form-control" id="inputValue" class = "col-md-4" style= "width:40px" value="0" />
    </div>
        <hr />
    <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />
    <input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />
    <input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />
    <input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="25" data-slider-step="1" data-slider-orientation="vertical" />


    </div>
    </div>

The JavaScript part :

    var aa, bb, cc, dd, abcd ;
    var Slider1Change = function() {
       aa = a.getValue();
       bb = b.getValue();
       cc = c.getValue();
       dd = d.getValue();
       abcd = aa + bb + cc + dd;

    $('#ex1').on('slide', function(slider){

      return abcd;

    }); 


    };

    $('#ex1').slider({
        value : 25,
      formatter: function(value) {
        return 'ABCD: ' + value;
      }
    });

    $('#ex2').slider({
        value : 2,
         reversed : true,
      formatter: function(value) {
        return 'A: ' + value;
      }
    });


    $('#ex3').slider({
        value : 15,
        reversed : true,
      formatter: function(value) {
        return 'B: ' + value;
      }
    });


    $('#ex4').slider({
        value : 10,
         reversed : true,
      formatter: function(value) {
        return 'C: ' + value;
      }
    });


    $('#ex5').slider({
        value : 6,
         reversed : true,
      formatter: function(value) {
        return 'D: ' + value;
      }
    });

    var a = $('#ex2').slider()
        .on('slide', Slider1Change)
        .data('slider');
    var b = $('#ex3').slider()
        .on('slide', Slider1Change)
        .data('slider');
    var c = $('#ex4').slider()
        .on('slide', Slider1Change)
        .data('slider');
    var d = $('#ex5').slider()
        .on('slide', Slider1Change)
        .data('slider');

CSS part:

   .wrapper {
    padding : 10px;
    margin-top: 20px;
    margin-left:30px;
    }

    #ex2Slider, #ex3Slider, #ex4Slider{
      margin-right :20px;
    }

    #ex1Slider .slider-selection {
      background: #ff6666;
    }

    #ex1Slider .slider-handle {
      background: #ff6666;
    }
    #ex2Slider .slider-handle {
      background: #ff6666;
    }#ex3Slider .slider-handle {
      background: #ff6666;
    }
    #ex4Slider .slider-handle {
      background: #ff6666;
    }#ex5Slider .slider-handle {
      background: #ff6666;
    }
javascriptjqueryhtmlcss

Answer №1

Check this out for some helpful information: http://jsfiddle.net/hawkeye15/qng5935v/13/

I've updated your JavaScript function below:

    $('#ex1').slider({
        value : 20,
      formatter: function(value) {
        return 'ABCD: ' + value;
      }
    });

    $('#ex2').slider({
        value : 2,
         reversed : true,
      formatter: function(value) {
        return 'A: ' + value;
      }
    });


    $('#ex3').slider({
        value : 15,
        reversed : true,
      formatter: function(value) {
        return 'B: ' + value;
      }
    });


    $('#ex4').slider({
        value : 10,
         reversed : true,
      formatter: function(value) {
        return 'C: ' + value;
      }
    });


    $('#ex5').slider({
        value : 6,
         reversed : true,
      formatter: function(value) {
        return 'D: ' + value;
      }
    });

    $("#ex2,#ex3,#ex4,#ex5").on("slide", function() {
        $('#ex1').slider('setValue', $('#ex2').slider('getValue') + $('#ex3').slider('getValue')+ $('#ex4').slider('getValue')+ $('#ex5').slider('getValue'));
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I use jQuery to set a JSON array as the value of a specific index in a jQuery array?

Imagine that I am fetching JSON data from two different PHP files, first.php and second.php, using jQuery. I want to store this data in an array named var total = [index1,index2]. The JSON data from the first.php should be assigned to the first index of th ...

phpjqueryarraysjson

angularjs issue with displaying data in ui-grid

Seeking assistance on implementing data display using ui-grid. Currently facing an issue where the grid is not showing any data, although when using a table with <tr ng-repeat="transaction in savingaccountdetails.transactions>, the data is displayed ...

angularjshtmlui-grid

What is the most effective method for attaching a jQuery click event to every anchor tag within each row of a table?

Displayed here is a grid (basic html table) showcasing users with the option to delete a specific user by clicking on the delete link. My typical approach involves: <% foreach (var user in Model.Users) {%> <tr > <td align="right"><% ...

javascriptjquery

Use the .getJSON method to retrieve data from a PHP file by appending it to the URL in your

I found multiple instances of acquiring information from a mysql query. What I want is the parsed html content in JSON format to be passed back to the jQuery function. My main objective is to separate PHP code from the initial page load. This implementa ...

phpjqueryjson

What steps do I need to take to successfully integrate Font Awesome 5 with React?

Here is an interesting scenario: the initial icon is displayed, but it fails to update when the class changes. const Circle = ({ filled, onClick }) => { const className = filled ? 'fas fa-circle' : 'far fa-circle'; return ( ...

javascriptreactjsfont-awesomefont-awesome-5

I'm encountering a Python Selenium error related to the timing of webpage loading

# Specifying the path to the chromedriver program service = Service('C:\Program Files (x86)\Google\chromedriver.exe') service.start() # Opening a remote connection with robinhood website using the driver driver = webdriver.Remote( ...

pythonhtmlpython-3.xseleniumweb

Angular Material Dropdown with Multi-Column Support

I'm working on customizing the selection panel layout to display items in multiple columns. However, I'm facing an issue where the last item in each column appears off-center and split, causing overflow into the next column instead of a vertical ...

cssangularangular-materialmultiple-columns

What is the best way to display input data (with names and values) in a textarea field

I'm currently working on a project that requires the value of a textarea to be updated whenever one of the input values in the same form is changed. Here is the HTML code: <form id="form" action="" method=""> <textarea readonly class="overv ...

javascriptjqueryhtml

Transfer a variable from one PHP page to another and navigate between the two pages

I am just starting to learn PHP and I have a scenario where I need to retrieve the last ID from the database. For each ID, I need to fetch the state and the associated link. If the state is equal to 1, then I need to extract some content from the link (whi ...

javascriptphpjqueryhtml

Struggling to show API images on NextJS application

I am currently exploring NextJS for the first time and attempting to showcase 3 random dog breed images on my app's webpage using the Dog.ceo API. Although I can view the three random dogs in the console through the console.log(data) line, I am facing ...

javascriptreactjsapinext.js

Getting rid of excess space surrounding text

Within my div, I am attempting to create a 5px padding around the text; however, there seems to be additional spacing that is interfering with my desired layout. It almost feels as though my browser is mocking my efforts by refusing to cooperate. This is ...

css

Expanding the functionality of the Ember JSONAPIAdapter for retrieving JSON data from a specified URL

As a newcomer to Ember.js, I am currently delving into understanding how Ember works. One issue I have encountered is calling my Django API from an Ember.js route using the following code: this.store.findAll('MYMODEL', 'ANOTHER_MODEL_ID&apos ...

javascriptdjangorestapiember.js

Creating an overloaded callable interface using TypeScript

The thread on implementing a callable interface provides some helpful information, but it doesn't fully address my specific query. interface lol { (a: number): (b: number) => string // (a: string): (b: string) => string // overloaded wi ...

javascripttypescriptclassinterface

Improving the functionality of multiple range slider inputs in JavaScript codeLet me

Is it possible to have multiple range sliders on the same page? Currently, all inputs only affect the first output on the page. Check out an example here: http://codepen.io/andreruffert/pen/jEOOYN $(function() { var output = document.querySelectorAl ...

javascripthtml

MUI input remains static and unaltered

I tried to switch from my regular input to a Material-UI text field. Everything was working fine before, but now the value isn't changing. const handleChangeInput = (e) => { const { name, value } = e.target; console.log(e.target.value); ...

javascriptreactjsmaterial-ui

What is the best way to swap out particular phrases within HTML documents or specific elements?

Trying to update specific strings within an HTML document or element. How do I go about parsing and replacing them? To clarify: - Identify all instances of #### in element .class - Swap them out with $$$$$ Currently utilizing jQuery for this task. Appre ...

javascriptjqueryhtmlstringreplace

Techniques for slowing down the propagation of events with jQuery

Is there a way to show a note after a user submits a form but before they leave the page? Here is an example of what I'm currently using: $('form').submit(function(event) { $('.note').show(); setTimeout(function() { ...

javascriptjquerydelayevent-propagation

Use javascript/ajax to submit the form on a separate page

I'm trying to use ajax to submit a form on another page, but my code doesn't seem to be working. Here is what I have: Send(); function Send() { var abc = document.getElementsByClassName("main"); for (var i = 0; i < abc.length; i++) { var ...

javascriptjqueryajax

How can I adjust the brightness, contrast, saturation, and hue in HTML5?

Is there a way to adjust the brightness without turning the image grey? I've been attempting to do so, but only managed to change it to greyscale. My objective is to increase and decrease the brightness of the image. Here is the current code: HTML ...

javascriptcsshtmlcanvas

Choose a single asset from the list of values stored in the Map

I'm looking to implement something similar to the following: let myMap = new Map<string, any>(); myMap.set("aaa", {a: 1, b: 2, c:3}); myMap.set("bbb", {a: 1, b: 2, c:6}); myMap.set("ccc", {a: 1, b: 2, c:9}); let cs = myMap.values().map(x => ...

javascripttypescriptdictionary