NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Hero met prijsindicatie-calculator New

Painter hero with a calculator (m², indoor or outdoor, coats) that shows a live price range.

Schildersbedrijf Verhoef · Utrecht

Wat kost uw schilderwerk? Binnen tien seconden een richtprijs.

Geen formulier, geen wachttijd. Schuif, kies en zie direct de bandbreedte. Daarna komen we kosteloos inmeten voor de vaste prijs.

  • Vaste prijs na inmeten, geen meerwerk achteraf
  • Inclusief verf, afdekken en opruimen
  • 5 jaar garantie op buitenwerk
Oppervlakte60 m²
10400 m²
Waar
Aantal lagen
Richtprijs incl. btw € 1.640 tot € 2.230 ca. 3 werkdagen · incl. verf en voorrijkosten
Plan gratis inmeten

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- Hero met prijsindicatie-calculator · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xcl">
  <div class="xcl__inner">
    <div class="xcl__text">
      <span class="xcl__eyebrow">Schildersbedrijf Verhoef · Utrecht</span>
      <h2 class="xcl__h">Wat kost uw schilderwerk? Binnen tien seconden een richtprijs.</h2>
      <p class="xcl__lead">Geen formulier, geen wachttijd. Schuif, kies en zie direct de bandbreedte. Daarna komen we kosteloos inmeten voor de vaste prijs.</p>
      <ul class="xcl__list"><li>Vaste prijs na inmeten, geen meerwerk achteraf</li><li>Inclusief verf, afdekken en opruimen</li><li>5 jaar garantie op buitenwerk</li></ul>
    </div>
    <form class="xcl__card" novalidate>
      <div class="xcl__field">
        <div class="xcl__lab"><span>Oppervlakte</span><output class="xcl__m2">60 m²</output></div>
        <input class="xcl__range" type="range" min="10" max="400" step="5" value="60" aria-label="Oppervlakte in vierkante meter">
        <div class="xcl__scale"><span>10</span><span>400 m²</span></div>
      </div>
      <div class="xcl__field">
        <div class="xcl__lab"><span>Waar</span></div>
        <div class="xcl__seg" role="radiogroup" data-k="plek">
          <button type="button" class="is-on" data-v="binnen" aria-pressed="true">Binnen</button>
          <button type="button" data-v="buiten" aria-pressed="false">Buiten</button>
        </div>
      </div>
      <div class="xcl__field">
        <div class="xcl__lab"><span>Aantal lagen</span></div>
        <div class="xcl__seg xcl__seg--3" data-k="lagen">
          <button type="button" data-v="1" aria-pressed="false">1 laag</button>
          <button type="button" class="is-on" data-v="2" aria-pressed="true">2 lagen</button>
          <button type="button" data-v="3" aria-pressed="false">3 lagen</button>
        </div>
      </div>
      <div class="xcl__res">
        <span class="xcl__reslab">Richtprijs incl. btw</span>
        <strong class="xcl__price" aria-live="polite">€ 1.640 tot € 2.230</strong>
        <span class="xcl__meta">ca. <b class="xcl__days">3</b> werkdagen · incl. verf en voorrijkosten</span>
      </div>
      <a class="xcl__cta" href="#">Plan gratis inmeten <span aria-hidden="true">→</span></a>
    </form>
  </div>
</div>
</div>

More page sections

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →