PDA

View Full Version : Selecting Jquery slider value



letom
08-22-2012, 05:17 AM
Can anybody help for Javascript for selecting the current number status of slider in the following one.

http://jqueryui.com/demos/slider/#steps

I mean if we change from 0 to 50 then 50 is the current status,

again moving from 50 to 100 then 100 is current status

My code is following.. please note scale refers the starting value (1) and ending value(100) for slider

$.fn.noUiSlider = function( method, options ) {

var settings = {


/**
** {scale}; The values represented by the slider knobs. (init,move,value)
** [ARRAY] [-+x,>x]
**/
'scale' : 1,100,
/**
** {start} The starting positions for the knobs, mapped to {scale}. (init)
** [ARRAY] [y>={scale[0]}, y=<{scale[1]}]
**/
'start' : [40,80],
/**

'save' : false

};

jscheuer1
08-22-2012, 07:20 AM
Use:


value: 50;

letom
08-22-2012, 09:57 AM
@ John

could u pls explain about the above quote ?

:)

letom
08-22-2012, 11:23 AM
@jscheuer1

pls look at the website http://harvestcfood.com/frm/

I want help to display the 10 elements according the status of slider. If the user changes slider in between 3 and 8 then display the elements in between 3 and 8.

Can u help me in programming or giving appropriate suggestions ....

jscheuer1
08-22-2012, 08:57 PM
I really don't understand what you're doing on that page. Try making everything external except for the init and only include what you're using for this slider in that. You should have an external script tag for jQuery on the page, followed by one for the jQuery UI package you are using. Then after that on the page itself have an internal script of about 10 lines (maybe a little more, maybe a little less) that initializes the slider.

If you do it that way, it will be much easier for both of us to understand what's going on.

letom
08-23-2012, 03:43 AM
Thanks.

Pls look again at the website http://harvestcfood.com/frm/
I have made it externally.
please note jq_slider_price1.js @ line 53(scale) it fix the length of slider 1 to 10

jscheuer1
08-23-2012, 04:44 AM
I felt I had to remove a lot of blank lines to work with this. Other than that, changes/additions are highlighted:


<!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>

letom
08-23-2012, 09:37 AM
@jscheuer1

Thanks for spending your valuable time to correct the coding. I will check it and if any errors will revert to you ... :)

letom
08-23-2012, 09:45 AM
@jscheuer1
Very thanks. I think ur highly experienced in JavaScript. May GOD BLESS U @jscheuer1

letom
08-24-2012, 04:20 AM
@jscheuer1

Once again. could u pls clear the following ?

For the above same script .. If we have prices up to $100 - $200 in slider
how can we FILTER THE SEARCH RESULTS BY displaying products which have prices in between $100-$200 , $150 - $ 175 and so on according to slider moves.

Where we can put this query SELECT * from products where products.price BETWEEN "'$result_min['minprice']'" and "'$result_max['maxprice']'"

:)

jscheuer1
08-24-2012, 02:13 PM
I'm not sure. I'm assuming that's a database query, right? Unfortunately I'm not very well versed with database. If you know how to sort and/or select from it visa vis price on the server side that would be a great help, or if it's already sorted that way, that would be good.

I guess one would either put all of the items on the page in order of price and then proceed more or less as we just did, or use AJAX to fetch only those that qualify.

The first seems like a better approach as long as the full range of products is to be displayed before user interaction anyway. It depends upon how many products though and upon how nimble the server is.

If there aren't too many products, set it up like that, listing all the products in order of price and show me the page it produces. I can probably tweak it from there.

letom
08-24-2012, 07:27 PM
Thanks for ur message.
i need to upload the whole content in my hosting server to correct the details