I felt I had to remove a lot of blank lines to work with this. Other than that, changes/additions are highlighted:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
*/
.infoBox{
display: block;
position: relative;
top: 20px;
font: italic 16px/20px 'Segoe Ui','Helvetica Neue';
margin-left: -2px;
}
.noUiSlider {
width: 180px;
border: 1px solid #CCC;
height: 8px;
background: #EEE;
}
.noUi-midBar {
height: 8px;
z-index: 0;
background-color: #3399cc;
}
.noUi-handle > div {
z-index: 5;
width: 16px;
height: 16px;
position: absolute;
top: -5px;
left: -8px;
border: 1px solid #CCC;
background: #EEE;
}
.noUi-handle > div:hover,
.noUi-activeHandle {
background: #adcbe1 !important;
border-color: #2673AB !important;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2){
.noUi-handle > div {
height: 32px;
width: 32px;
top: -13px;
left: -16px;
}
</style>
</head>
<body>
<script src="jq_slider_price.js"></script>
<script src="jq_slider_price1.js"></script>
<div id="prlist"><BR /><BR /><BR /><BR />
<div style="position: relative;" id="noUiSlider" class="noUiSlider"></div><BR /><BR />
<div id="tnc" style="border:1px solid #333300; width:700px; height:300px;">
<div>1. AAAAAAAAAA</div>
<div>2. BBBBBBBB</div>
<div>3. CCCCCCCC</div>
<div>4. DDDDDDDD</div>
<div>5. EEEEEEEEE</div>
<div>6. FFFFFFF</div>
<div>7. GGGGGGGGGG</div>
<div>8. HHHHHHHHH</div>
<div>9. IIIIIIII</div>
<div>10.KKKKKKKK</div>
</div>
<script>
$(function(){
var init = function(){
var stepSetting = false;
var $tns = $('#tnc div');
if ($("#valueInput input[type='checkbox']").is(':checked')){
stepSetting=20;
}
$("#noUiSlider").empty().noUiSlider( 'init', {
step: stepSetting,
change:
function(){
var values = $(this).noUiSlider( 'value' );
$tns.css({display: 'block'}).slice(0, values[0] - 1).css({display: 'none'}).end().slice(values[1]).css({display: 'none'});
$(this).find('.noUi-lowerHandle .infoBox').text(values[0]);
$(this).find('.noUi-upperHandle .infoBox').text(values[1]);
},
end:
function(type){
var message = "The slider was last changed by ";
if ( type=="click" ){ message=message+"clicking the bar."; }
else if ( type=="slide" ){ message=message+"sliding a knob."; }
else if ( type=="move" ){ message=message+"calling the move function."; }
$("#slideType").fadeOut(function(){
$(this).text(message).fadeIn();
});
}
}).find('.noUi-handle div').each(function(){
$(this).append('<span class="infoBox"></span>');
});
};
init.call();
$("#goNow").click(trigger);
$("#valueInput input[type='checkbox']").change(init);
});
var trigger = function(){
$("#noUiSlider").noUiSlider('move',{
knob: $("#whichKnob").val(),
to: $("#valueInput input").val()
})
};
</script>
</body>
</html>
Selecting Jquery slider value
Reply With Quote
Bookmarks