Hello,

I have two jquery scripts. These are two range slider which creates values between 1 and 25 (level) and 1-4. (qualityId) 

I send the values of these two sliders via ajax in the php_file.php. I need the values of the sliders get changed dynamically in a link since I need to create a link to a json from where I echo out some informations via php.

So everytime a slider gets moved I want the both values gets changed dynamically and independently in a link without a page reload.

The problem

At the moment if a person moves one slider everything is working, the value in the link gets changed dynamically but if the second slider gets moved then the value from the first slider disappears. So my questions is how can I have two sliders on the page and send both values back to php.

Here are two screenshots for a better understanding. For better testing I just echo out the link on the screens.

Here is the html_file.php

3. <script>
4. $( function() {
5.     $( "#slider-range-max" ).slider({
6.         range: "max",
7.         min: 1,
8.         max: 25,
9.         value: 1,
10.         stop: function(event, ui) {
11.             $("#amount").val(ui.value);
12.             /* Here we send the slider value towards PHP */
13.             $.ajax({
14.                 method: "POST",
15.                 url: "php_file.php",
16.                 data: { sliderVal: ui.value, sliderVal2: ui.value }
17.             })
18.             /* Here we receive the data back */
19.             .done(function(data) {
20.                 /* Here you can do whatever you want with the data */
21.                $("#content").html(data);
22.             });
23.         }
24.     });
25.     $( "#amount" ).val( $("#slider-range-max").slider("value") );
26. });
27. $( function() {
28.     $( "#slider-range-max2" ).slider({
29.         range: "max",
30.         min: 1,
31.         max: 4,
32.         value: 1,
33.         stop: function(event, ui) {
34.             $("#amount2").val(ui.value);
35.             /* Here we send the slider value towards PHP */
36.             $.ajax({
37.                 method: "POST",
38.                 url: "php_file.php",
39.                 data: { sliderVal: ui.value, sliderVal2: ui.value }
40.             })
41.             /* Here we receive the data back */
42.             .done(function(data2) {
43.                 /* Here you can do whatever you want with the data */
44. 
    
45.                 $("#content").html(data2);
46.             });
47.         }
48.     });
49. });
50. 
    
51. </script>
52. 
    
53. <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
54. <div id="slider-range-max"></div>
55. 
    
56. <input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
57. <div id="slider-range-max2"></div>
58. 
    
59. <div id='content'></div>

2. <?php 
3. $str = $_POST['sliderVal']; 
4. $quality = $_POST['sliderVal2']; 
5. 
   
6. $str2 = file_get_contents('https://example.com/stats/258?level='. $str .'&qualityId='. $quality .'&locale=en_EN'); 
7. 
   
8. $json = json_decode($str2, true); // decode the JSON into an associative array 
9. 
   
10. $n= $json['health']; 
13. echo '<div class="profile-font2">', $n, '</div>';
14.  
15. ?>

I think the mistake could be in the ajax- data value. I just send one value in each function, but don´t know how to fix it without destroying the both sliders.

Thanks for help.