Edit element

sa-fee-calc-interactive

Name (slug) Version

Category Status

Description When to use Source skill Rules (one per line, leading dash optional)

1. Default settlement value is $250,000, not $100,000. Set the range input value, visible label, initial card totals, fee rows, difference banners, and slider --sa-pct to match $250,000.
2. Range is $10,000 to $1,000,000 in $10,000 steps.
3. Place inside the section whose point it proves, usually Bigger Share Guarantee or fee comparison. A contextual paragraph must sit immediately above the widget.
4. If nested under an H2 section, the widget title is H3. Use H2 only when the calculator is the actual section heading.
5. Toggle labels are Litigation and Pre-Litigation. Keep the fee math at 45 percent for Litigation, 40 percent for Pre-Litigation, and 35 percent for Us.
6. The reusable snippet uses uid fee250k1 for preview only. Replace it with a unique alphanumeric UID for each placement so IDs and inline handlers do not collide.
7. Use the canonical 768px mobile breakpoint and verify the slider and cards at 390px before publishing.
8. This is an attorney-fee comparison tool only. It must not estimate case value or imply a case-worth range.

Live reference URL Deployment notes HTML

<div class="sa-fee-container">
<div class="sa-fee-header">
<h3>Attorney Fees</h3>
</div>
<div class="sa-fee-toggle-container">
<div class="sa-fee-toggle-group">
<button class="sa-toggle-btn active" id="btn-lit-fee250k1" onclick="saSetPhase_fee250k1('litigation')" type="button">Litigation</button>
<button class="sa-toggle-btn" id="btn-pre-fee250k1" onclick="saSetPhase_fee250k1('pre-litigation')" type="button">Pre-Litigation</button>
</div>
</div>
<div class="sa-litigation-subtext" id="sa-litigation-subtext-fee250k1">
        Most firms raise their fee percentage when your case goes to litigation. We never do.
    </div>
<div class="sa-fee-sliders">
<div class="sa-slider-box">
<label for="sa-fee-settlement-fee250k1">Total Settlement: <strong id="sa-fee-set-val-fee250k1">$250,000</strong></label>
<input id="sa-fee-settlement-fee250k1" max="1000000" min="10000" oninput="saCalcStandardFee_fee250k1()" step="10000" type="range" value="250000"/>
<div class="sa-slider-feet"><span>$10,000</span><span>$1,000,000</span></div>
</div>
</div>
<div class="sa-fee-comparison-grid">
<div class="sa-fee-card them-card">
<div class="sa-card-top text-center-red"><h4>THEM</h4></div>
<div class="sa-fee-row"><span>Total Settlement:</span><span class="sa-dark-text" id="comp-gross-fee250k1">$250,000</span></div>
<div class="sa-fee-row red-text"><span>Their Fee:</span><span id="comp-fee-fee250k1">-$112,500</span></div>
<hr class="sa-divider"/>
<div class="sa-fee-row total red-text"><span>Your Share:</span><span id="comp-takehome-fee250k1">$137,500</span></div>
<div class="sa-banner-saving-red">You PAY an extra <span id="ag-savings-diff-red-fee250k1">$25,000</span></div>
</div>
<div class="sa-fee-card us-card">
<div class="sa-card-top text-center-green"><h4>US</h4></div>
<div class="sa-fee-row"><span>Total Settlement:</span><span class="sa-dark-text" id="ag-gross-fee250k1">$250,000</span></div>
<div class="sa-fee-row"><span>Our Fee:</span><span class="sa-dark-text" id="ag-fee-fee250k1">-$87,500</span></div>
<hr class="sa-divider"/>
<div class="sa-fee-row total green-text"><span>Your Share:</span><span id="ag-takehome-fee250k1">$162,500</span></div>
<div class="sa-banner-saving-green">You KEEP an extra <span id="ag-savings-diff-green-fee250k1">$25,000</span></div>
</div>
</div>
<p class="sa-fee-disclaimer" style="color:#0B212D!important;">*Disclaimer: Calculations are for illustrative purposes. Actual recoveries depend on insurance policy limits and liability variables. Out-of-pocket medical bills and litigation expenses are typically deducted from the client’s share.</p>
</div>
<style>
.sa-main-content .sa-fee-context { font-family:'Poppins',sans-serif; font-size:17px; line-height:1.65; font-weight:500; color:#0B212D; text-align:center; max-width:720px; margin:12px auto 18px; }
.sa-fee-container { font-family: 'Poppins', sans-serif; color: #0B212D; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 12px; max-width: 800px; margin: 2rem auto; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); padding: 25px; box-sizing: border-box; }
.sa-fee-header { text-align: center; margin-bottom: 25px; }
.sa-fee-header h3 { font-size: 1.75rem; margin: 0; color: #0B212D; font-weight: 600; text-align: center; }
.sa-fee-toggle-container { margin-bottom: 15px; }
.sa-fee-toggle-group { display: flex; gap: 10px; }
.sa-toggle-btn { flex: 1; background: #f1f5f9; border: 1px solid #cbd5e1; color: #475569; padding: 14px 10px; border-radius: 6px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; font-family: 'Poppins', sans-serif; text-align: center; }
.sa-toggle-btn.active { background: #0B212D; color: #ffffff; border-color: #0B212D; }
.sa-toggle-btn:hover:not(.active) { background: #e2e8f0; }
.sa-litigation-subtext { text-align: center; font-size: 0.9rem; font-weight: 500; color: #475569; margin-bottom: 25px; line-height: 1.4; }
.sa-fee-sliders { background: #f8fafc; padding: 20px; border-radius: 8px; margin-bottom: 25px; }
.sa-slider-box label { display: flex; justify-content: space-between; font-size: 0.95rem; font-weight: 600; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.sa-slider-box input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; outline: none; margin: 4px 0 6px 0; padding: 0; --sa-pct: 24.24%; }
.sa-slider-box input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, #0B212D 0, #0B212D var(--sa-pct), #cbd5e1 var(--sa-pct), #cbd5e1 100%); border: none; }
.sa-slider-box input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: #cbd5e1; border: none; }
.sa-slider-box input[type="range"]::-moz-range-progress { height: 6px; border-radius: 999px; background: #0B212D; border: none; }
.sa-slider-box input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 22px; width: 22px; border-radius: 50%; background: #0B212D; border: 3px solid #ffffff; box-shadow: 0 0 0 1px #0B212D, 0 2px 6px rgba(11,33,45,0.35); margin-top: -8px; cursor: pointer; transition: transform 0.15s ease; }
.sa-slider-box input[type="range"]::-webkit-slider-thumb:hover, .sa-slider-box input[type="range"]:focus::-webkit-slider-thumb { transform: scale(1.1); }
.sa-slider-box input[type="range"]::-moz-range-thumb { height: 22px; width: 22px; border-radius: 50%; background: #0B212D; border: 3px solid #ffffff; box-shadow: 0 0 0 1px #0B212D, 0 2px 6px rgba(11,33,45,0.35); cursor: pointer; transition: transform 0.15s ease; }
.sa-slider-box input[type="range"]::-moz-range-thumb:hover, .sa-slider-box input[type="range"]:focus::-moz-range-thumb { transform: scale(1.1); }
.sa-slider-feet { display: flex; justify-content: space-between; font-size: 0.75rem; color: #64748b; margin-top: 5px; font-weight: 500; }
.sa-fee-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sa-fee-card { border-radius: 8px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; background: #ffffff; box-sizing: border-box; }
.sa-fee-card.us-card { border: 2px solid #047857; }
.sa-fee-card.them-card { border: 2px solid #b91c1c; }
.sa-card-top { text-align: center; margin-bottom: 15px; }
.sa-card-top h4 { margin: 0; font-size: 1.5rem; font-weight: 600; text-align: center; }
.text-center-green h4 { color: #047857; }
.text-center-red h4 { color: #b91c1c; }
.sa-fee-row { display: flex; justify-content: space-between; font-size: 0.95rem; margin-bottom: 12px; font-weight: 500; gap: 8px; }
.sa-dark-text { color: #0B212D; font-weight: 600; }
.red-text { color: #b91c1c; font-weight: 600; }
.green-text { color: #047857; font-weight: 600; }
.sa-fee-row.total { font-size: 1.05rem; font-weight: 600; margin-top: 10px; }
.sa-divider { border: 0; border-top: 1px dashed #cbd5e1; margin: 10px 0; }
.sa-banner-saving-green { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; padding: 10px; border-radius: 6px; text-align: center; font-size: 0.9rem; font-weight: 600; margin-top: 15px; }
.sa-banner-saving-red { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; padding: 10px; border-radius: 6px; text-align: center; font-size: 0.9rem; font-weight: 600; margin-top: 15px; }
.sa-fee-disclaimer { font-size: 0.7rem; color: #94a3b8; line-height: 1.4; margin-top: 25px; text-align: center; font-weight: 500; }
@media (max-width: 768px) {
    .sa-fee-container { padding: 16px; margin: 1.25rem auto; max-width: none; width: calc(100vw - 32px); margin-left: 50%; transform: translateX(-50%); box-sizing: border-box; }
    .sa-fee-comparison-grid { grid-template-columns: 1fr; gap: 14px; }
    .sa-fee-card.us-card { order: 1; }
    .sa-fee-card.them-card { order: 2; }
    .sa-fee-toggle-group { flex-direction: column; gap: 8px; }
    .sa-fee-header h3 { font-size: 1.35rem; }
    .sa-fee-card { padding: 18px; }
    .sa-fee-row { font-size: 0.9rem; }
    .sa-fee-row.total { font-size: 1rem; }
    .sa-slider-box label { font-size: 0.9rem; }
    .sa-litigation-subtext { font-size: 0.85rem; padding: 0 4px; }
    .sa-banner-saving-green, .sa-banner-saving-red { font-size: 0.85rem; }
}

/* sa-live-qa-leftover-fix-20260603 */
.sa-page-wrapper a.sa-sidebar-btn,
.sa-page-wrapper .sa-sidebar-btn {
  background: #FFFFFF !important;
  color: #0B212D !important;
  border: 2px solid #D97706 !important;
  text-decoration: none !important;
}
.sa-page-wrapper a.sa-sidebar-btn:hover,
.sa-page-wrapper .sa-sidebar-btn:hover,
.sa-page-wrapper a.sa-sidebar-btn:focus,
.sa-page-wrapper .sa-sidebar-btn:focus {
  background: #0B212D !important;
  color: #FFFFFF !important;
  border-color: #0B212D !important;
}
.sa-page-wrapper .sa-fee-disclaimer,
.sa-page-wrapper .sal-asib-heading {
  color: #0B212D !important;
}
.sa-page-wrapper .sa-rb-stars,
.sa-page-wrapper .sa-mhr-stars,
.sa-page-wrapper .sa-rb-cite,
.sa-page-wrapper .sa-mhr-cite {
  color: #D97706 !important;
}
.sa-page-wrapper .sa-toc-wrap a,
.sa-page-wrapper details.sa-toc-wrap a,
.sa-page-wrapper .sa-toc-body a,
.sa-page-wrapper .sa-toc-list a {
  color: #0B212D !important;
  text-decoration-color: #D97706 !important;
}
</style>
<script>
(function(){
    var uid = 'fee250k1';
    var saCurrentPhase = 'litigation';
    window['saSetPhase_' + uid] = function(phase) {
        saCurrentPhase = phase;
        document.getElementById('btn-lit-' + uid).classList.toggle('active', phase === 'litigation');
        document.getElementById('btn-pre-' + uid).classList.toggle('active', phase === 'pre-litigation');
        document.getElementById('sa-litigation-subtext-' + uid).style.display = (phase === 'litigation') ? 'block' : 'none';
        window['saCalcStandardFee_' + uid]();
    };
    window['saCalcStandardFee_' + uid] = function() {
        var slider = document.getElementById('sa-fee-settlement-' + uid);
        var s = parseInt(slider.value);
        var min = parseInt(slider.min) || 10000;
        var max = parseInt(slider.max) || 1000000;
        var pct = ((s - min) / (max - min)) * 100;
        slider.style.setProperty('--sa-pct', pct + '%');
        document.getElementById('sa-fee-set-val-' + uid).textContent = '$' + s.toLocaleString();
        var agRate = 0.35;
        var agFee = s * agRate;
        var compRate = (saCurrentPhase === 'litigation') ? 0.45 : 0.40;
        var compFee = s * compRate;
        document.getElementById('ag-gross-' + uid).textContent = '$' + s.toLocaleString();
        document.getElementById('ag-fee-' + uid).textContent = '-$' + Math.round(agFee).toLocaleString();
        document.getElementById('ag-takehome-' + uid).textContent = '$' + Math.round(s - agFee).toLocaleString();
        document.getElementById('comp-gross-' + uid).textContent = '$' + s.toLocaleString();
        document.getElementById('comp-fee-' + uid).textContent = '-$' + Math.round(compFee).toLocaleString();
        document.getElementById('comp-takehome-' + uid).textContent = '$' + Math.round(s - compFee).toLocaleString();
        var extra = Math.max(0, compFee - agFee);
        document.getElementById('ag-savings-diff-green-' + uid).textContent = '$' + Math.round(extra).toLocaleString();
        document.getElementById('ag-savings-diff-red-' + uid).textContent = '$' + Math.round(extra).toLocaleString();
    };
    window['saCalcStandardFee_' + uid]();
})();
</script>

CSS

Cancel