Thread: BBUI.JS Slider Help

Hi, I'm currently developing a tip calculator using BBUI.JS. I'm having a slight problem with the slider in Ripple though. The problem I am having is that when you slide the slider across, it changes the number in the box above it - I would like it to change the percentage underneath it, as attached in the image below. Hopefully, someone can help me out here, as I'm not too sure on which element I should be defining, when I put
Code:
<input type="range" min="0" max="100" value="0" step="1" onchange="document.getElementById('bill').value = this.value">
It defines the box above the slider and I'm not sure which Element is the percentage below. Also, if anyone knows how link it all together, so the price + tip + sharing between how many people, to equal into the total box at the bottom, that would be very helpful! Thanks in advance



Here is my code:
<meta name="viewport" content="width=device-width" />

<div data-bb-type="screen" data-bb-effect="fade">

<div data-bb-type="title" data-bb-caption="Calculate Tip" ></div>

<div data-bb-type="menu">
<div data-bb-type="menu-item" data-bb-img="images/ic_help.png" data-bb-pin="left" onclick="bb.pushScreen('help.html', 'Help');">Help</div>

<div data-bb-type="menu-item" data-bb-img="images/ic_settings.png" onclick="bb.pushScreen('settings.html', 'Settings');">Settings</div>

<div data-bb-type="menu-item" data-bb-img="images/ic_info.png" data-bb-pin="right" onclick="bb.pushScreen('about.html', 'About');">About</div>
</div>

<div data-bb-type="round-panel">
<div data-bb-type="panel-header">Tip Calculator</div>
</div>

<script>
function tipCalculate(slider,bill){
var tip = document.getElementById('tip');
var slideval = document.getElementById('slideval');
var bill = document.getElementById(bill).value;
var prcnt = slider * .01;
tip.innerHTML = "$"+(bill * prcnt).toFixed(2);
slideval.innerHTML = slider+"%";
}
</script>

Enter the bill amount for your meal: $
<input type="text" id="bill"><br>

Tip Percentage:
<input type="range" min="0" max="100" value="0" step="1" onchange="document.getElementById('bill').value = this.value">
<span id="slideval">0%</span>

<h2>Tip to leave = <span id="tip"></span></h2>

<h2> Sharing Between: </h2>
<select>
<option value="1" selected="true">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>

<h1>Total<Input type="Text" id="bill" + "tip"></h1>


<!--BOTTOM PAGE MENU BAR -->

<div data-bb-type="action-bar">
<div data-bb-type="action" data-bb-style="tab" data-bb-overflow="true" data-bb-img="images/148.like.png" onclick="bb.pushScreen('attribution.html', 'Attribution');">Attribution</div>


<div data-bb-type="action" data-bb-style="button" data-bb-img="images/185.Pocket1.png" onclick="bb.pushScreen('menu.html', 'Menu');">Tip</div>
<div data-bb-type="action" data-bb-style="button" data-bb-img="images/ic_share.png" onclick="bb.pushScreen('recommend.html', 'Recommend');">Recommend</div>
<div data-bb-type="action" data-bb-style="button" data-bb-img="images/ic_bbm.png" onclick="bb.pushScreen('feedback.html', 'Feedback');">Feedback</div>


<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="images/ic_cancel.png" >Close</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="images/150.Utensils.png" onclick="bb.pushScreen('nearbyrestaurants.html', 'Near-by Restaurants');">Near-by Restaurants</div>
<div data-bb-type="action" data-bb-style="button" data-bb-overflow="true" data-bb-pin="true" data-bb-img="images/058.Notes.png" onclick="bb.pushScreen('shazam.html', 'Shazam');">Shazam</div>
</div>
</div>

I have also attached my app, so that the code is easier to look at, thanks again

https://www.dropbox.com/s/nokypfqaz675edr/Tipper.zip

I think the issue is that right now you have the slider to change the bill value here

onchange="document.getElementById('bill').value = this.value"

you want to have it instead change the percent, so change the ID to

onchange="document.getElementById('slideval').value = this.value"

try that and let me know if that works for you...
I'm doing more development in the cascades side of things, but im still learning...as we all are.

Hi, I tried this - doesn't seem to work in Ripple either. Thanks though - the problem I am having is that the only element that the slider works on, in Ripple, is: onchange="document.getElementById('bill').value = this.value"
but this is the wrong element, and none of the other ones work

Have you asked the BBdev twitter account? (@BlackBerryDev)