jQuery Calc - Avg Example w/Range Element

Shows HTML5 range element with the jQuery Calc plug-in.

HTML

<script src="http://www.pengoworks.com/workshop/jquery/calculation/jquery.calculation.js"></script>
<script src="http://www.pengoworks.com/workshop/jquery/field/jquery.field.js"></script>

   
<input type="range" name="avg" value="50" min="0" max="100" step="1.1" style="width: 240px;" /><br />

<input type="text" name="totalAvg" id="totalAvg" value="" size="2" />

CSS

#testForm {
    width: 800px;
}

code {
    background-color: #e0e0e0;
}

#formContent p {
    clear: both;
    min-height: 20px;
}

#idCheckboxMsg{
    color: red;
    font-weight: bold;
}

#totalTextSum,
.textSum,
#totalTextAvg,
.textAvg {
    border: 1px solid black;
    padding: 2px;
}

JavaScript

// automatically update the "#totalSum" field every time
// the values are changes via the keyup event
//$("input[name^=sum]").sum("keyup", "#totalSum");

// automatically update the "#totalAvg" field every time
// the values are changes via the keyup event
$("input[name^=avg]").avg({
    bind:"input"
    , selector: "#totalAvg"
  
});