How can i do a Slider?

[cenourinha]

Hi there, i would like to do a slider like the one i found here:

 

https://www.teamspeak.cc/whmcs/cart.php?a=add&pid=85

 

How can it be done?

[bear]

It's done with Javascript, looks like something he got through Yahoo. Check the source on the page, it has all you need to locate the scripts at Yahoo, or write your own. (don't take his).

[cenourinha]

Yeah, but i mean, can i use html inside product configurations?

[bear]

I'd imagine you can, but that would depend on your skill level with coding. I don't see a good reason why that can't be adapted.

[cenourinha]

For what i can understand they are using a Option Type: Quantity field in their system. They use this and they use the slider to adjust the "count" field but what i don't understand is how they automatically update the result:

 

<div class="yui-skin-sam">

<div id="slider-bg" class="yui-h-slider" tabindex="-1" title="Slider">

<div id="slider-thumb" class="yui-slider-thumb"><img src="https://teamspeak.cc/images/thumb-fader.gif"></div>

</div>

 

<br/>

<p><input autocomplete="off" id="configoption[11]" name="configoption[11]" type="text" value="5" size="4" maxlength="4" /> <span id="slider-value"></span> slots x $0.39 <b><span id="total-cost">Type # of slots and press Enter.</span></b></p>

</div>

[D-Litz]

You can find all the information about this slider here

 

http://developer.yahoo.com/yui/slider/

[cenourinha]

Yes, i know how to use the YUI Library, but i can't understand how to insert the bold code in whmcs fields

[bear]

Yes, i know how to use the YUI Library, but i can't understand how to insert the bold code in whmcs fields

This is what I was referring to when I stated it depended on your coding skill. If you knew how JS worked, as well as the YUI, you'd know it states what field to edit when updating based on the slider. IE:

(function() {
10 var Event = YAHOO.util.Event,
11 Dom = YAHOO.util.Dom,
12 lang = YAHOO.lang,
13 slider,
14 bg="slider-bg", thumb="slider-thumb", totalarea="total-cost", valuearea="slider-value", textfield="configoption[11]" 

Then in the page:

<p><input type="text" maxlength="4" size="4" value="5" name="configoption[11]" id="configoption[11]" autocomplete="off"/> <span id="slider-value">5</span> slots x $0.39 <b><span id="total-cost">= $1.95 USD</span></b></p>

 

If after this it's still unclear, you should probably hire someone to assist.

Hope that helps.

[cenourinha]

I know how js works... but this way i will need to edit the input field for "Quantity" in order to add the <span id="slider-value">5</span> and <span id="total-cost">= $1.95 USD</span>. How can i do this without making it general... i mean, with the possibility of creating another "Quantity" fields without this <span> tags.

[wirenine]

This would be a good addition to the configuration option addon.