JQUERY UI Slider With Arrows & String Map

Question

In short, I have a JQUERY UI Slider. The values are all based on a string map (array). The map is then split to display 2 separate values when you slide. This all works 100%. I now have two arrows on both sides of the slider that is suppose to do the same thing, slide left / right and increment / decrements. Those also does the job.

But, how do I (when clicking my images left / right) get the value from my map array and update my text controls?

    <script>
        $(function () {
            var valMap =
                [
                "2500#2000","2500#4000","2500#6000","2500#15000",
                "3200#2000","3200#4000","3200#6000","3200#15000",
                "3500#0",
                "4000#2000","4000#4000","4000#6000","4000#15000",
                ];

            var s = $("#slider").slider({
                value: 0,
                min: 0,
                max: valMap.length,
                slide: function (event, ui) {
                    var curVal = valMap[ui.value].split('#');
                    var basicVal = curVal[0];
                    var volVal = curVal[1];                   

                    if (volVal == '0') {
                        $("#vol").fadeOut("slow");
                        $("#volLbl").fadeOut("slow");
                        var premTot = ((parseFloat(basicVal)) / 11).toFixed(2);
                    }
                    else {
                        $("#vol").fadeIn("slow");
                        $("#volLbl").fadeIn("slow");
                        var premTot = ((parseFloat(basicVal) * parseFloat(volVal)) / 14800).toFixed(2);
                    }
                    $("#basic").val("R " + basicVal);
                    $("#vol").val("R " + volVal);
                    $("#prem").val("R " + premTot);
                }
            });
            $("#imgPrev").click(function () {
                s.slider('value', s.slider('value') - s.slider("option", "step"));
            });
            $("#imgNext").click(function () {
                s.slider('value', s.slider('value') + s.slider("option", "step"));
            });
        });
  </script>

<div>
    <p>
        <label>Basic Excess:</label><input type="text" id="basic" style="border:0; color:#f6931f; font-weight:bold;">
        <br />
        <label id="volLbl">Voluntary Excess:</label><input type="text" id="vol" style="border:0; color:#f6931f; font-weight:bold;">
        <br />
        <label>Premium:</label><input type="text" id="prem" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
 <table style="width:100%;">
    <tr>
     <td style="width:26px;"><img src="Images/Previous_24x24.png" id="imgPrev" /></td>
     <td><div id="slider"></div></td>
     <td style="width:26px;"><img src="Images/Next_24x24.png" id="imgNext" /></td>
    </tr>
 </table>
</div>

Thanks all!

Answer 1

The calculation done in the slide event is absolutely the same you need to do when #imgNext and #imgPrevclick events are called, what was being done is that the value of the slider was being updated, but not actually firing slide event, so an approach would be to make a function out of the code from slide event and call it in both cases, for example:

$(function () {
        var valMap =
            [
            "2500#2000","2500#4000","2500#6000","2500#15000",
            "3200#2000","3200#4000","3200#6000","3200#15000",
            "3500#0",
            "4000#2000","4000#4000","4000#6000","4000#15000",
            ];
        var basicVal, volVal, premTot;

        var s = $("#slider").slider({
            value: 0,
            min: 0,
            max: valMap.length,
            slide: function (event, ui) {
                calculate(ui.value);
            }
        });
        $("#imgPrev").click(function () {
            s.slider('value', s.slider('value') - s.slider("option", "step"));
            calculate(s.slider('value'));
        });
        $("#imgNext").click(function () {
            s.slider('value', s.slider('value') + s.slider("option", "step"));
            calculate(s.slider('value'));
        });

    function calculate(value){
      curVal = valMap[value].split('#');
      basicVal = curVal[0];
      volVal = curVal[1];                   

      if (volVal == '0') {
          $("#vol").fadeOut("slow");
          $("#volLbl").fadeOut("slow");
          var premTot = ((parseFloat(basicVal)) / 11).toFixed(2);
      }
      else {
          $("#vol").fadeIn("slow");
          $("#volLbl").fadeIn("slow");
          var premTot = ((parseFloat(basicVal) * parseFloat(volVal)) / 14800).toFixed(2);
      }
      $("#basic").val("R " + basicVal);
      $("#vol").val("R " + volVal);
      $("#prem").val("R " + premTot);
    }
});

The parameter to the new calculate function is the selected index. Perhaps you will want to set the text controls when page is first loaded also.

FIDDLE: http://jsfiddle.net/YE5v5/