Coupled Sliders for Picking Pledges and Pledge Caps

[dreeves]

Desiderata

• Have someone read a draft
• Keywords/tags
• Title image
• Link preview excerpt
• Publish
• Blog blurbs
• Waggledance
• Tweet
• Tip of the day

---

http://doc.bmndr.co/sliders

Cognata

• https://github.com/beeminder/beeminder/issues/5604

Verbata: new feature announcements, UI/UX changes,

[dreeves]

Conceptually it's like this for the sliders, where the pledge slider has a tab hanging down. That way if the pledge cap is slid left it pushes the pledge with it, and conversely if the pledge is slid right:

SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 1600 900">
--
<rect width="100%" height="100%" fill="#f7f6f4"/>
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="160%">
<feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#000000" flood-opacity="0.08"/>
</filter>
<style>
.label { font-family: Arial, Helvetica, sans-serif; font-size: 42px; fill: #6b7680; font-weight: 600; }
.money { font-family: Arial, Helvetica, sans-serif; font-size: 48px; fill: #6b7680; font-weight: 700; }
</style>
</defs>
 
<text class="label" x="260" y="208">pledge</text>
<text class="label" x="260" y="528">pledge cap</text>
 
<text class="money" x="224" y="309.0">$</text>
<text class="money" x="1368" y="309.0">$$$</text>
<text class="money" x="224" y="629.0">$</text>
<text class="money" x="1368" y="629.0">$$$</text>
 
<path d="M303,250 H1297 A43,43 0 0 1 1340,293 V293 A43,43 0 0 1 1297,336 H303 A43,43 0 0 1 260,293 V293 A43,43 0 0 1 303,250 Z" fill="#d9e0e5" stroke="#c4cdd4" stroke-width="4"/>
<path d="M339,284.0 H1261 A9,9 0 0 1 1270,293.0 V293.0 A9,9 0 0 1 1261,302.0 H339 A9,9 0 0 1 330,293.0 V293.0 A9,9 0 0 1 339,284.0 Z" fill="#aebac2"/>
<path d="M303,570 H1297 A43,43 0 0 1 1340,613 V613 A43,43 0 0 1 1297,656 H303 A43,43 0 0 1 260,613 V613 A43,43 0 0 1 303,570 Z" fill="#d9e0e5" stroke="#c4cdd4" stroke-width="4"/>
<path d="M339,604.0 H1261 A9,9 0 0 1 1270,613.0 V613.0 A9,9 0 0 1 1261,622.0 H339 A9,9 0 0 1 330,613.0 V613.0 A9,9 0 0 1 339,604.0 Z" fill="#aebac2"/>
 
<g filter="url(#shadow)">
<path d="M 672,365.0
A 78,78 0 1 1 728,365.0
L 728.0,621.0
A 20,20 0 0 1 672.0,621.0
L 672,365.0
Z" fill="#f4c62b" stroke="#d6aa17" stroke-width="6" stroke-linejoin="round"/>
</g>
 
<g filter="url(#shadow)">
<circle cx="806" cy="613.0" r="76" fill="#ef7d6a" stroke="#d65d4c" stroke-width="6"/>
</g>
</svg>

[dreeves]

[dreeves]

[bsoule]

[dreeves]