Question

http://jsfiddle.net/jonnystudent/VycW2/

I need this code but, I`ve done something but not working.
What is jquery ui source codes for this?

Answer 1

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>

  $(document).ready(function() {
function update() {            
     $interest = 0.15 ;
     $perday = 20 ;
     $amount1 = $("#amount").val();
     $amount1 = parseInt($amount1, 10) || 100;
     $dayscount = $("#days").val();
     $amount2 = parseInt($amount1) + $interest * parseInt($amount1) + (parseInt($dayscount) * ($perday/100));
     $apr = Math.pow($amount2 / 100, 365.25 / $dayscount) - 1 ;
     $("#amount").text(parseFloat($amount1).toFixed(2));
     $("#amount2").text(parseFloat($amount2).toFixed(2));
     $("#amount3").text(parseFloat($amount2-$amount1).toFixed(2));
     $("#amount4").text(parseFloat($apr).toFixed(2));     
}



$("#slider1").slider({
    max:350,
    min:100,
    step:10,
    value:100,
    animate: 'true',
    slide: function(event, ui) {  
        $("#amount").val(ui.value);
        $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">£'+ui.value+'</div>');

                update();

    }    
});

function addDaysToDate(days) {
  var mths = new Array("Jan", "Feb", "Mar",
    "Apr", "May", "Jun", "Jul", "Aug", "Sep",
    "Oct", "Nov", "Dec");

  var d = new Date();
  d.setHours(d.getHours() + (24 * days));

  var currD = d.getDate();
  var currM = d.getMonth();
  var currY = d.getFullYear();

  return mths[currM] + " " + currD + ", " + currY;
}



$("#slider2").slider({
    max:30,
    min:7,
    value:7,
    animate: 'true',    
    slide: function(event, ui) {  

        $("#days").val(ui.value);
            $(this).find('.ui-slider-handle').html('<div class="sliderControl-label v-labelCurrent">'+ui.value+'<span class="unit"> days</span></div>');
        $("#date").text(addDaysToDate(parseInt($("#days").val())));
                update();
    },
    create: function(event, ui) {
      $("#date").text(addDaysToDate(parseInt($("#days").val())));
    }    
});

$("#days").val($("#slider2").slider("value"));

$("#days").change(function(event) {
  var data = $("#days").val();
  if (data.length > 0)
  {
     if (parseInt(data) >= 7 && parseInt(data) <= 31)
     {
         $("#slider2").slider("option", "value", data);
     }
     else
     {
        if (parseInt(data) < 1)
        {
            $("#days").val("7");
            $("#slider2").slider("option", "value", "7");
        }
        if (parseInt(data) > 31)
        {
            $("#days").val("31");
            $("#slider2").slider("option", "value", "31");
        }
     }
  }
  else
  {
    $("#slider2").slider("option", "value", "7");
  }
  $("#date").text(addDaysToDate(parseInt($("#days").val())));
});

update();
});


  </script>
</head>

<body>

                    <div class="loanForm container">
<form action="/apply" method="post" accept-charset="utf-8" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="authenticityToken" value="7d4a97927e8b95ef16093c1ca5615929c336517e">
<fieldset class="loanForm-ranges">
    <ul>
        <li>
            <label for="howMuch">Loan Amount:</label>

             <div class ="sliderControl" style="opacity:1;">
                 <span class="sliderControl-label v-labelMin">£100</span>
                <div id="slider1" name="newloan_cash" style="-moz-transform: translateX(0px);" >              
                   <div class="sliderControl-ambit"></div>
               </div>                
                <span class="sliderControl-label v-labelMax">£350</span> 
            </div>                    
        </li>



        <li>
    <label for="howLong">Loan Length:</label>

   <div class ="sliderControl" style="opacity:1;">      
    <span class="sliderControl-label v-labelMin">7 Days</span> 
        <div id="slider2" name="newloan_days" style="-moz-transform: translateX(0px);" >
               <div class="sliderControl-ambit"></div>    
        </div>
        <span class="sliderControl-label v-labelMax">30 Days</span> 
    </div>
        </li>
  </ul>
<p class="loanForm-apr">APR : <span class="actual" id="amount4"></span>%</p>
</fieldset>
</div>

<div class="loanForm-readout ">
    <ul>
        <li class="loanForm-item loanForm-borrowBox">
          <div class="loanForm-label">Your loan:</div>
            <div class="loanForm-totalToBorrow v-number" id="amount">
                <span class="dollarSign">£</span>
                <span class="decimal">00</span>
            </div>
        </li>

        <li class="loanForm-item loanForm-additionBox first">
            <div class="loanForm-label loanForm-additionsLabel">+ Interest<span data-original-title="" class="popover-trigger hide-on-phone" style="position:relative" rel="popover">?</span></div>
            <div class="loanForm-baseFee v-number" id="amount3">
            </div>
        </li>

        <li class="loanForm-item loanForm-repayBox">
          <div class="loanForm-label">
            <span class="loanForm-repay">Auto repayment</span>
            <strong class="loanForm-repayDate"><div id="date">:</div></strong>

          </div>
          <div class="loanForm-totalToRepay v-number" id="amount2"><span class="dollarSign">£</span></div><input type="hidden" id="days" value="1"/>
        </li>
    </ul>
              <div class="loanForm-submit">
          <input type="submit" class="btn btn-primary btn-large btn-block" name="applySubmit" id="applySubmit" value="Get your money now" >
        </div>            

    </div>

</form>  
</body>

</html>

两个滑块连接不起作用

1 个答案: