0

I am working on a script that I am basing off of an example. In the example they used:

$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)

to get the price to show up within the green slider. I am wanting to add the price to budgetAmount, which I accomplished and put the text "BUDGET" in the prices place. However, in doing this, the sliding bar does not slide to the chosen dot anymore.

To see the original effect comment out the code like this:

//$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
        $("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
        //$("#sliderInterval").text("BUDGET")
        //$("#budgetAmount").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)

Basically, I cannot figure out what to change the following code to in order to allow the green bar to slide at the chosen dot.

$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)

Also, you will notice that you have to click directly on the dot to get this to slide. Is there a way I can get the surrounding area to make clickable as well?

 $(function() {
  var ranges = [{
    lower: 500,
    upper: 1000
  }, {
    lower: 1100,
    upper: 2000
  }, {
    lower: 2100,
    upper: 5000
  }, {
    lower: 5100,
    upper: 10000
  }, {
    lower: 11000,
    upper: 20000
  }, {
    lower: 21000,
    upper: 50000
  }, ];
  var wslider = $("#sliderBar").width() / (ranges.length);
  for (var i = 0; i < ranges.length; i++) {
    var range = $('<div class="intervalCircle">');
    var left = (100 / (ranges.length) * (i + 0.5));
    left = "calc(" + left + "% - 8px)";
    range.css("left", left);
    range.on("click", function(idx) {
      return function() {
        var sliderleft = wslider * idx;
  //$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
  //*** HERE ***            $("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
  $("#sliderInterval").text("BUDGET")
  $("#budgetAmount").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
          .animate({
            left: sliderleft - 2
          });
      };
    }(i));
    $("#sliderBar").append(range);
    $("#sliderInterval").css("width", wslider + "px");
  }
});
#sliderBar {
  border-radius: 15px;
  width: 90%;
  height: 30px;
  margin: 30px 10%;
  background: #454343;
  position: relative;
  overflow: hidden;
}
.intervalCircle {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  background: red;
  z-index: 1;
  position: absolute;
  margin-top: 10px;
  cursor: pointer;
}
.intervalCircle:hover {
  
}
.rangeSection.active{
  background-color: green;
  z-index: 3;
}
.sliderInterval:first-child {
  padding-left: 0%;
}
.intervalCircle:first-child {
  padding-left: 0;
}
#sliderInterval {
  height: 100%;
  border-radius: 15px;
  position: absolute;
  text-align: center;
  z-index: 999;
  color: #FFF;
  background-color: green;
}
#budgetAmount {
 font-size: 1.5em;
 color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sliderBar">
 <div id="sliderInterval"></div>
</div>
<div id="budgetAmount"></div>
Becky
  • 2,283
  • 2
  • 23
  • 50

1 Answers1

1

You have to move the line with "Budget" so it can call the animate function

$("#sliderInterval").text("BUDGET").animate({
            left: sliderleft - 2
          });

In this way it can move.

To make the budget look like $1,000-$2,000 

$("#budgetAmount").text("$" + ranges[idx].lower.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + "$" + ranges[idx].upper.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));

Source: answer

$(function() {
  var ranges = [{
    lower: 500,
    upper: 1000
  }, {
    lower: 1100,
    upper: 2000
  }, {
    lower: 2100,
    upper: 5000
  }, {
    lower: 5100,
    upper: 10000
  }, {
    lower: 11000,
    upper: 20000
  }, {
    lower: 21000,
    upper: 50000
  }, ];
  var wslider = $("#sliderBar").width() / (ranges.length);
  for (var i = 0; i < ranges.length; i++) {
    var range = $('<div class="intervalCircle">');
    var left = (100 / (ranges.length) * (i + 0.5));
    left = "calc(" + left + "% - 8px)";
    range.css("left", left);
    range.on("click", function(idx) {
      return function() {
        var sliderleft = wslider * idx;
  //$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
  //*** HERE ***            $("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
  
  $("#budgetAmount").text("$" + ranges[idx].lower.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " - " + "$" + ranges[idx].upper.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
          $("#sliderInterval").text("BUDGET").animate({
            left: sliderleft - 2
          });
      };
    }(i));
    $("#sliderBar").append(range);
    $("#sliderInterval").css("width", wslider + "px");
  }
});
#sliderBar {
  border-radius: 15px;
  width: 90%;
  height: 30px;
  margin: 30px 10%;
  background: #454343;
  position: relative;
  overflow: hidden;
}
.intervalCircle {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  background: red;
  z-index: 1;
  position: absolute;
  margin-top: 10px;
  cursor: pointer;
}
.intervalCircle:hover {
  
}
.rangeSection.active{
  background-color: green;
  z-index: 3;
}
.sliderInterval:first-child {
  padding-left: 0%;
}
.intervalCircle:first-child {
  padding-left: 0;
}
#sliderInterval {
  height: 100%;
  border-radius: 15px;
  position: absolute;
  text-align: center;
  z-index: 999;
  color: #FFF;
  background-color: green;
}
#budgetAmount {
 font-size: 1.5em;
 color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sliderBar">
 <div id="sliderInterval"></div>
</div>
<div id="budgetAmount"></div>
Community
  • 1
  • 1
silviagreen
  • 1,679
  • 1
  • 18
  • 39
  • Thank you! I didn't know it was so simple. Do you know if there is anything I can do to get the area around the dots to be clickable too? – Becky Feb 20 '16 at 09:54
  • I am afraid there is no way at the moment: the clickable area is the div with class .intervalCircle, which is the little circle itself and it is auto generated by the Jquery if I understood right. The only possible workaround that I see is to try to modify the script to surround the div with an a tag and then apply che clicked jquery function to those a tag – silviagreen Feb 20 '16 at 10:05
  • ok. I'll figure out that. One tiny question I can't figure out. I'm trying to add commas to my ranges, so that the values are printed out like $1,000 instead of $1000. I tried doing this `upper: 1+","+000` and it displays live like this: $1,0 .... Any ideas? – Becky Feb 20 '16 at 10:23
  • use ranges[idx].lower.toFixed(3) (it will use the . instead of , but you can decide the number of decimal places) – silviagreen Feb 20 '16 at 10:36
  • to replace . with , : price1 = price1.toFixed(2).replace(".", ","); – silviagreen Feb 20 '16 at 10:37
  • You completely lost me. – Becky Feb 20 '16 at 10:39
  • It turns everything into millions for some reason. – Becky Feb 20 '16 at 11:17
  • My mistake, i misunderstood your question, I am working on it – silviagreen Feb 20 '16 at 11:20