JQuery Cost Calculator

I need two cost calculators. (the second has a toggle for a third calculation).

I have attached a PDF for the UI and a doc for the calculations, wrapper CSS, labelling, incrememnts, value ranges and default points

- - - - - - - - - - - - - - - -

Cost Calc 1 and Cost Calc 2
- they share very common style/UI and components

Cost Calc2 has a toggle to switch the background calculations (a) and (b)

- - - - - - - - - - - - - - - -

I have prepared an HTML working model of the UI and have the radial background image and the radial pointer as PNGs. So the base framework, CSS and media queries are already in place.

https://www.hwbdesign.co.uk/clients/demo/

JQuery will be available - so jquery operations can be used. But due to script clashes I can’t rely/use on any Bootstrap based scripts.

The outer wrapper fixes the width to 540px
- at 767px it is 420px
- at 575 it is 300px
… so three fixed sizes

- - - - - - - - - - - - - - - -

What I need is:

The range sliders dropped in:
- with incremental +/- at the left and right
- styled as the PDF
- with resulting values
- see calculations-pph.rtf

The radial slider dropped in
- styled as the PDF
- with resulting values
- see calculations-pph.rtf

The calculations for CstCalc 1
The calculations for CstCalc 2 (first toggle position - this is the default position)
The calculations for CstCalc 2 (second toggle position)

The calculations to be done ‘on the fly’ - as there is no ‘submit’ button.

- - - - - - - - - - - - - - - -

Labelling:

AAAAAAAAA, BBBBBBBBB, CCCCCCC, ZZZZZZZZ, XXXXXXX, will be added in later - as this will be part of an editing mechanism

I have put in the largest numbers that the X, Y & Z fields should result in £99,999,999

The graphics for the range sliders - I have not done yet - if you need any - just let me know what size and format - and I can provide them.

- - - - - - - - - - - - - - - -