Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Posts: 386
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

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 

<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

BBUI.JS Slider Help-percentage.jpg

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 data-bb-type="round-panel"> 
<div data-bb-type="panel-header">Tip Calculator</div>

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+"%";

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

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


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

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