Apex Code Development You need to sign in to do that
Don't have an account?
Rony57 Visualforce Range Slider
Hi All,
I have wrote some code for range slider in VF and I have little bit knowledge in JS. My question is
1. I want to change step based on some criteria for min value and max values. In my code step is working proper for max value but step for min value is not working.
2. And i want to change dynamic value for slider. if min value is 10000 then max value should be 50000.
pls help me out
//my code is------------
I have wrote some code for range slider in VF and I have little bit knowledge in JS. My question is
1. I want to change step based on some criteria for min value and max values. In my code step is working proper for max value but step for min value is not working.
2. And i want to change dynamic value for slider. if min value is 10000 then max value should be 50000.
pls help me out
//my code is------------
<apex:page >
<head>
<apex:stylesheet value="{!URLFOR($Resource.bootstrap_SFOne,'bootstrap-sf1/dist/css/bootstrap.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.SliderCSSJS,'jquery/jquery-ui-1.7.2.custom.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.SliderCSSJS,'jquery/jquery-1.3.2.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.SliderCSSJS,'jquery/jquery-ui-1.7.2.custom.min.js')}"/>
<script type="text/javascript">
$(document).ready(function(){
$("#slider-range").slider({
range: true,
min: 0,
max: 20000000,
step: 1000,
values: [0,1000000],
slide: function(event, ui){
$("#minBudget").html('$' + $("#slider-range").slider("values", 0));
$("#maxBudget").html('$' + $("#slider-range").slider("values", 1));
var step = $('#slider-range').slider('option', 'step');
if(ui.values[0]<50000){
$('#slider-range').slider('option', 'step', 5000);
}else{
$('#slider-range').slider('option', 'step', 10000);
}
if(ui.values[1]<50000){
$('#slider-range').slider('option', 'step', 5000);
}else if(ui.values[1]>=50000 && ui.values[1]<100000){
$('#slider-range').slider('option', 'step', 10000);
}else if(ui.values[1]>=100000 && ui.values[1]<2500000){
$('#slider-range').slider('option', 'step', 100000);
}else if(ui.values[1]>=2500000 && ui.values[1]<5000000){
$('#slider-range').slider('option', 'step', 200000);
}else if(ui.values[1]>=5000000 && ui.values[1]<10000000){
$('#slider-range').slider('option', 'step', 500000);
}else{
$('#slider-range').slider('option', 'step', 1000000);
}
}
});
$("#minBudget").html('$' + $("#slider-range").slider("values", 0));
$("#maxBudget").html('$' + $("#slider-range").slider("values", 1));
});
</script>
</head>
<body>
<div id="slider-range" style="font-size: 90%; margin-top: 5em;"></div>
<div id="minBudget" style="margin-top: 1.5em;float:left"></div>
<div id="maxBudget" style="margin-top: 1.5em;float:right"></div>
</body>
<style type="text/css">
.ui-slider-horizontal .ui-slider-handle {
top: -0.75em;
}
.ui-slider .ui-slider-handle{
height:2em;
border-radius: 2em;
width: 1.9em;
}
.ui-state-default, .ui-widget-content .ui-state-default {
border: 1px solid #E10707;
background: repeat-x scroll 50% 50% #f39b9b;
font-weight: bold;
color: #1C94C4;
outline: medium none;
}
.ui-state-hover, .ui-widget-content, .ui-state-hover, .ui-state-focus, .ui-state-content, .ui-state-focus {
border: 1px solid #125189;
background-color:#78b7ef;
}
.ui-slider .ui-slider-handle:hover{
border: 1px solid #125189;
background: repeat-x scroll 50% 50% #78b7ef;
}
.ui-slider-horizontal .ui-slider-range {
top: -1px;
height: 118%;
}
</style>
</apex:page>