Amend donation slider
Budget: £10 – £50 GBP
I've built a simple donation sldier using HTML & CSS.
However i require some JS to adjust the functions.
1. Add numbers below the slider corresponding with each step (£0, £2, £5, £15, £30) as shown in image 1 (attached)
2. Currently the 'steps' of the slider are in increments of £5. This needs amending to correspond with the numbering (eg. Step 0 = £0, Step 1 = £2, Step 2 = £5, Step 3 = £15, Step 4 = £30).
3. Fix counter issue on mobile & tablet devices (currently the slider does not work properly on mobile, it does not show the total in the yellow counter) - image 2 (attached). I'd like the slider to also be adjusted in width on mobile devices so the slider itself is 75% of the width and the counter is 25% of the width of the screen.
4. Link the slider to the 'quote buble' images (desktop only). When the user moves the slider to each step, it will show the quote bubbles corresponding with the images attached. All quote bubbles hidden at £0. I've already uploaded the quote bubbles which can be seen on the site, they should all be hidden as default and then display when each step progresses
- Image 4 - £2
- Image 5 - £5
- Image 6 - £15
- Image 7 - £30
However i require some JS to adjust the functions.
1. Add numbers below the slider corresponding with each step (£0, £2, £5, £15, £30) as shown in image 1 (attached)
2. Currently the 'steps' of the slider are in increments of £5. This needs amending to correspond with the numbering (eg. Step 0 = £0, Step 1 = £2, Step 2 = £5, Step 3 = £15, Step 4 = £30).
3. Fix counter issue on mobile & tablet devices (currently the slider does not work properly on mobile, it does not show the total in the yellow counter) - image 2 (attached). I'd like the slider to also be adjusted in width on mobile devices so the slider itself is 75% of the width and the counter is 25% of the width of the screen.
4. Link the slider to the 'quote buble' images (desktop only). When the user moves the slider to each step, it will show the quote bubbles corresponding with the images attached. All quote bubbles hidden at £0. I've already uploaded the quote bubbles which can be seen on the site, they should all be hidden as default and then display when each step progresses
- Image 4 - £2
- Image 5 - £5
- Image 6 - £15
- Image 7 - £30