Range field
Base
-
-
{% include "@Components/forms/range-field/range-field.twig" with {props: { name: "price", min: { value: 0, start: 0, prefix: "Od", suffix: "Kč", }, max: { value: 20000000, start: 10000000, prefix: "Do", suffix: "Kč", }, step: 1000 }} %} -
<div class="f-range" data-min="0" data-max="20000000" data-min-start="0" data-max-start="10000000" data-step="1000"> <div class="f-range__inputs"> <div class="f-range__input --min" data-prefix="Od" data-suffix="Kč" > <input type="text" name="price-min" value="0"> </div> <div class="f-range__input --max" data-prefix="Do" data-suffix="Kč" > <input type="text" name="price-max" placeholder="Neomezeno" value="10000000"> </div> </div> <div class="f-range__slider"></div> </div>
With histogram
-
-
{% include "@Components/forms/range-field/range-field.twig" with {props: { name: "price", min: { value: 0, start: 0, prefix: "Od", }, max: { value: 124900000, start: 18900000, prefix: "Do" }, step: 1000, histogram: [ {"id":0,"max":3125000,"min":0,"pocet":120}, {"id":1,"max":6250000,"min":3125001,"pocet":185}, {"id":2,"max":9375000,"min":6250001,"pocet":260}, {"id":3,"max":12500000,"min":9375001,"pocet":350}, {"id":4,"max":15625000,"min":12500001,"pocet":380}, {"id":5,"max":18750000,"min":15625001,"pocet":275}, {"id":6,"max":21875000,"min":18750001,"pocet":195}, {"id":7,"max":25000000,"min":21875001,"pocet":195}, {"id":8,"max":28125000,"min":25000001,"pocet":145}, {"id":9,"max":31250000,"min":28125001,"pocet":120}, {"id":10,"max":34375000,"min":31250001,"pocet":105}, {"id":11,"max":37500000,"min":34375001,"pocet":130}, {"id":12,"max":40625000,"min":37500001,"pocet":165}, {"id":13,"max":43750000,"min":40625001,"pocet":205}, {"id":14,"max":46875000,"min":43750001,"pocet":245}, {"id":15,"max":50000000,"min":46875001,"pocet":235}, {"id":16,"max":53125000,"min":50000001,"pocet":295}, {"id":17,"max":56250000,"min":53125001,"pocet":310}, {"id":18,"max":59375000,"min":56250001,"pocet":320}, {"id":19,"max":62500000,"min":59375001,"pocet":265}, {"id":20,"max":65625000,"min":62500001,"pocet":215}, {"id":21,"max":68750000,"min":65625001,"pocet":175}, {"id":22,"max":71875000,"min":68750001,"pocet":155}, {"id":23,"max":75000000,"min":71875001,"pocet":140}, {"id":24,"max":78125000,"min":75000001,"pocet":135}, {"id":25,"max":81250000,"min":78125001,"pocet":125}, {"id":26,"max":84375000,"min":81250001,"pocet":148}, {"id":27,"max":87500000,"min":84375001,"pocet":162}, {"id":28,"max":90625000,"min":87500001,"pocet":108}, {"id":29,"max":93750000,"min":90625001,"pocet":103}, {"id":30,"max":96875000,"min":93750001,"pocet":97}, {"id":31,"max":100000000,"min":96875001,"pocet":92}, {"id":32,"max":103125000,"min":100000001,"pocet":88}, {"id":33,"max":106250000,"min":103125001,"pocet":82}, {"id":34,"max":109375000,"min":106250001,"pocet":72}, {"id":35,"max":112500000,"min":109375001,"pocet":65}, {"id":36,"max":115625000,"min":112500001,"pocet":42}, {"id":37,"max":118750000,"min":115625001,"pocet":23}, {"id":38,"max":121875000,"min":118750001,"pocet":7}, {"id":39,"max":124900000,"min":121875001,"pocet":0} ] }} %} -
<div class="f-range" data-min="0" data-max="124900000" data-min-start="0" data-max-start="18900000" data-step="1000"> <div class="f-range-slider-histogram-element"> <div class="f-range__histogram"> <div class="f-range__histogram-column" style="height: 31.57894736842105%;" data-min-pct="0" data-max-pct="2.5"></div> <div class="f-range__histogram-column" style="height: 48.68421052631579%;" data-min-pct="2.5" data-max-pct="5"></div> <div class="f-range__histogram-column" style="height: 68.42105263157895%;" data-min-pct="5" data-max-pct="7.5"></div> <div class="f-range__histogram-column" style="height: 92.10526315789474%;" data-min-pct="7.5" data-max-pct="10"></div> <div class="f-range__histogram-column" style="height: 100%;" data-min-pct="10" data-max-pct="12.5"></div> <div class="f-range__histogram-column" style="height: 72.36842105263158%;" data-min-pct="12.5" data-max-pct="15"></div> <div class="f-range__histogram-column" style="height: 51.31578947368421%;" data-min-pct="15" data-max-pct="17.5"></div> <div class="f-range__histogram-column" style="height: 51.31578947368421%;" data-min-pct="17.5" data-max-pct="20"></div> <div class="f-range__histogram-column" style="height: 38.15789473684211%;" data-min-pct="20" data-max-pct="22.5"></div> <div class="f-range__histogram-column" style="height: 31.57894736842105%;" data-min-pct="22.5" data-max-pct="25"></div> <div class="f-range__histogram-column" style="height: 27.631578947368425%;" data-min-pct="25" data-max-pct="27.500000000000004"></div> <div class="f-range__histogram-column" style="height: 34.21052631578947%;" data-min-pct="27.500000000000004" data-max-pct="30"></div> <div class="f-range__histogram-column" style="height: 43.42105263157895%;" data-min-pct="30" data-max-pct="32.5"></div> <div class="f-range__histogram-column" style="height: 53.94736842105263%;" data-min-pct="32.5" data-max-pct="35"></div> <div class="f-range__histogram-column" style="height: 64.47368421052632%;" data-min-pct="35" data-max-pct="37.5"></div> <div class="f-range__histogram-column" style="height: 61.8421052631579%;" data-min-pct="37.5" data-max-pct="40"></div> <div class="f-range__histogram-column" style="height: 77.63157894736842%;" data-min-pct="40" data-max-pct="42.5"></div> <div class="f-range__histogram-column" style="height: 81.57894736842105%;" data-min-pct="42.5" data-max-pct="45"></div> <div class="f-range__histogram-column" style="height: 84.21052631578947%;" data-min-pct="45" data-max-pct="47.5"></div> <div class="f-range__histogram-column" style="height: 69.73684210526315%;" data-min-pct="47.5" data-max-pct="50"></div> <div class="f-range__histogram-column" style="height: 56.57894736842105%;" data-min-pct="50" data-max-pct="52.5"></div> <div class="f-range__histogram-column" style="height: 46.05263157894737%;" data-min-pct="52.5" data-max-pct="55.00000000000001"></div> <div class="f-range__histogram-column" style="height: 40.78947368421053%;" data-min-pct="55.00000000000001" data-max-pct="57.49999999999999"></div> <div class="f-range__histogram-column" style="height: 36.84210526315789%;" data-min-pct="57.49999999999999" data-max-pct="60"></div> <div class="f-range__histogram-column" style="height: 35.526315789473685%;" data-min-pct="60" data-max-pct="62.5"></div> <div class="f-range__histogram-column" style="height: 32.89473684210527%;" data-min-pct="62.5" data-max-pct="65"></div> <div class="f-range__histogram-column" style="height: 38.94736842105263%;" data-min-pct="65" data-max-pct="67.5"></div> <div class="f-range__histogram-column" style="height: 42.63157894736842%;" data-min-pct="67.5" data-max-pct="70"></div> <div class="f-range__histogram-column" style="height: 28.421052631578945%;" data-min-pct="70" data-max-pct="72.5"></div> <div class="f-range__histogram-column" style="height: 27.105263157894736%;" data-min-pct="72.5" data-max-pct="75"></div> <div class="f-range__histogram-column" style="height: 25.526315789473685%;" data-min-pct="75" data-max-pct="77.5"></div> <div class="f-range__histogram-column" style="height: 24.210526315789473%;" data-min-pct="77.5" data-max-pct="80"></div> <div class="f-range__histogram-column" style="height: 23.157894736842106%;" data-min-pct="80" data-max-pct="82.5"></div> <div class="f-range__histogram-column" style="height: 21.578947368421055%;" data-min-pct="82.5" data-max-pct="85"></div> <div class="f-range__histogram-column" style="height: 18.947368421052634%;" data-min-pct="85" data-max-pct="87.5"></div> <div class="f-range__histogram-column" style="height: 17.105263157894736%;" data-min-pct="87.5" data-max-pct="90"></div> <div class="f-range__histogram-column" style="height: 11.052631578947368%;" data-min-pct="90" data-max-pct="92.5"></div> <div class="f-range__histogram-column" style="height: 6.052631578947368%;" data-min-pct="92.5" data-max-pct="95"></div> <div class="f-range__histogram-column" style="height: 1.8421052631578945%;" data-min-pct="95" data-max-pct="97.5"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="97.5" data-max-pct="100"></div> </div> <div class="f-range__slider"></div> </div> <div class="f-range__inputs"> <div class="f-range__input --min" data-prefix="Od" data-suffix="" > <input type="text" name="price-min" value="0"> </div> <div class="f-range__input --max" data-prefix="Do" data-suffix="" > <input type="text" name="price-max" placeholder="Neomezeno" value="18900000"> </div> </div> </div>
With histogram - dynamical
-
-
{% include "@Components/forms/range-field/range-field.twig" with {props: { extraClass: "ajax-update", name: "price", min: { value: 0, start: 56260000, prefix: "Od", }, max: { value: 124900000, start: 84260000, prefix: "Do" }, step: 1000, histogram: [] }} %} <script> // Example of how to update histogram data dynamically document.addEventListener('DOMContentLoaded', function() { // Simulate an AJAX request with setTimeout setTimeout(function() { // This would normally come from an AJAX response const newHistogramData = [ {"id":0,"max":3125000,"min":0,"pocet":120}, {"id":1,"max":6250000,"min":3125001,"pocet":185}, {"id":2,"max":9375000,"min":6250001,"pocet":260}, {"id":3,"max":12500000,"min":9375001,"pocet":350}, {"id":4,"max":15625000,"min":12500001,"pocet":380}, {"id":5,"max":18750000,"min":15625001,"pocet":275}, {"id":6,"max":21875000,"min":18750001,"pocet":195}, {"id":7,"max":25000000,"min":21875001,"pocet":195}, {"id":8,"max":28125000,"min":25000001,"pocet":145}, {"id":9,"max":31250000,"min":28125001,"pocet":120}, {"id":10,"max":34375000,"min":31250001,"pocet":105}, {"id":11,"max":37500000,"min":34375001,"pocet":130}, {"id":12,"max":40625000,"min":37500001,"pocet":165}, {"id":13,"max":43750000,"min":40625001,"pocet":205}, {"id":14,"max":46875000,"min":43750001,"pocet":245}, {"id":15,"max":50000000,"min":46875001,"pocet":235}, {"id":16,"max":53125000,"min":50000001,"pocet":295}, {"id":17,"max":56250000,"min":53125001,"pocet":310}, {"id":18,"max":59375000,"min":56250001,"pocet":320}, {"id":19,"max":62500000,"min":59375001,"pocet":265}, {"id":20,"max":65625000,"min":62500001,"pocet":215}, {"id":21,"max":68750000,"min":65625001,"pocet":175}, {"id":22,"max":71875000,"min":68750001,"pocet":155}, {"id":23,"max":75000000,"min":71875001,"pocet":140}, {"id":24,"max":78125000,"min":75000001,"pocet":135}, {"id":25,"max":81250000,"min":78125001,"pocet":125}, {"id":26,"max":84375000,"min":81250001,"pocet":148}, {"id":27,"max":87500000,"min":84375001,"pocet":162}, {"id":28,"max":90625000,"min":87500001,"pocet":108}, {"id":29,"max":93750000,"min":90625001,"pocet":103}, {"id":30,"max":96875000,"min":93750001,"pocet":97}, {"id":31,"max":100000000,"min":96875001,"pocet":92}, {"id":32,"max":103125000,"min":100000001,"pocet":88}, {"id":33,"max":106250000,"min":103125001,"pocet":82}, {"id":34,"max":109375000,"min":106250001,"pocet":72}, {"id":35,"max":112500000,"min":109375001,"pocet":65}, {"id":36,"max":115625000,"min":112500001,"pocet":42}, {"id":37,"max":118750000,"min":115625001,"pocet":23}, {"id":38,"max":121875000,"min":118750001,"pocet":7}, {"id":39,"max":124900000,"min":121875001,"pocet":0} ]; // Update the histogram with new data // You can use a selector or an element reference window.updateHistogram('.ajax-update', newHistogramData); // Example of how to update a specific range if there are multiple on the page // window.updateHistogram('#specific-range-id', newHistogramData); }, 3000); // Update after 3 seconds }); </script> -
<div class="f-range ajax-update" data-min="0" data-max="124900000" data-min-start="56260000" data-max-start="84260000" data-step="1000"> <div class="f-range-slider-histogram-element"> <div class="f-range__histogram"> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> <div class="f-range__histogram-column histogram-column-placeholder" style="height: 100%"></div> </div> <div class="f-range__slider"></div> </div> <div class="f-range__inputs"> <div class="f-range__input --min" data-prefix="Od" data-suffix="" > <input type="text" name="price-min" value="56260000"> </div> <div class="f-range__input --max" data-prefix="Do" data-suffix="" > <input type="text" name="price-max" placeholder="Neomezeno" value="84260000"> </div> </div> </div> <script> // Example of how to update histogram data dynamically document.addEventListener('DOMContentLoaded', function() { // Simulate an AJAX request with setTimeout setTimeout(function() { // This would normally come from an AJAX response const newHistogramData = [ {"id":0,"max":3125000,"min":0,"pocet":120}, {"id":1,"max":6250000,"min":3125001,"pocet":185}, {"id":2,"max":9375000,"min":6250001,"pocet":260}, {"id":3,"max":12500000,"min":9375001,"pocet":350}, {"id":4,"max":15625000,"min":12500001,"pocet":380}, {"id":5,"max":18750000,"min":15625001,"pocet":275}, {"id":6,"max":21875000,"min":18750001,"pocet":195}, {"id":7,"max":25000000,"min":21875001,"pocet":195}, {"id":8,"max":28125000,"min":25000001,"pocet":145}, {"id":9,"max":31250000,"min":28125001,"pocet":120}, {"id":10,"max":34375000,"min":31250001,"pocet":105}, {"id":11,"max":37500000,"min":34375001,"pocet":130}, {"id":12,"max":40625000,"min":37500001,"pocet":165}, {"id":13,"max":43750000,"min":40625001,"pocet":205}, {"id":14,"max":46875000,"min":43750001,"pocet":245}, {"id":15,"max":50000000,"min":46875001,"pocet":235}, {"id":16,"max":53125000,"min":50000001,"pocet":295}, {"id":17,"max":56250000,"min":53125001,"pocet":310}, {"id":18,"max":59375000,"min":56250001,"pocet":320}, {"id":19,"max":62500000,"min":59375001,"pocet":265}, {"id":20,"max":65625000,"min":62500001,"pocet":215}, {"id":21,"max":68750000,"min":65625001,"pocet":175}, {"id":22,"max":71875000,"min":68750001,"pocet":155}, {"id":23,"max":75000000,"min":71875001,"pocet":140}, {"id":24,"max":78125000,"min":75000001,"pocet":135}, {"id":25,"max":81250000,"min":78125001,"pocet":125}, {"id":26,"max":84375000,"min":81250001,"pocet":148}, {"id":27,"max":87500000,"min":84375001,"pocet":162}, {"id":28,"max":90625000,"min":87500001,"pocet":108}, {"id":29,"max":93750000,"min":90625001,"pocet":103}, {"id":30,"max":96875000,"min":93750001,"pocet":97}, {"id":31,"max":100000000,"min":96875001,"pocet":92}, {"id":32,"max":103125000,"min":100000001,"pocet":88}, {"id":33,"max":106250000,"min":103125001,"pocet":82}, {"id":34,"max":109375000,"min":106250001,"pocet":72}, {"id":35,"max":112500000,"min":109375001,"pocet":65}, {"id":36,"max":115625000,"min":112500001,"pocet":42}, {"id":37,"max":118750000,"min":115625001,"pocet":23}, {"id":38,"max":121875000,"min":118750001,"pocet":7}, {"id":39,"max":124900000,"min":121875001,"pocet":0} ]; // Update the histogram with new data // You can use a selector or an element reference window.updateHistogram('.ajax-update', newHistogramData); // Example of how to update a specific range if there are multiple on the page // window.updateHistogram('#specific-range-id', newHistogramData); }, 3000); // Update after 3 seconds }); </script>
With histogram - real data (cr 1 200)
-
-
{% include "@Components/forms/range-field/range-field.twig" with {props: { name: "price", min: { value: 0, start: 12458632, prefix: "Od", }, max: { value: 160000000, start: 42900000, prefix: "Do" }, step: 1000, histogram: [{"id":0,"max":990000,"min":280000,"pct":2.69,"pocet":6},{"id":1,"max":2540250,"min":990000,"pct":4.04,"pocet":9},{"id":2,"max":4090500,"min":2540250,"pct":5.38,"pocet":12},{"id":3,"max":5640750,"min":4090500,"pct":7.62,"pocet":17},{"id":4,"max":7191000,"min":5640750,"pct":5.38,"pocet":12},{"id":5,"max":8741250,"min":7191000,"pct":6.73,"pocet":15},{"id":6,"max":10291500,"min":8741250,"pct":6.28,"pocet":14},{"id":7,"max":11841750,"min":10291500,"pct":3.14,"pocet":7},{"id":8,"max":13392000,"min":11841750,"pct":5.38,"pocet":12},{"id":9,"max":14942250,"min":13392000,"pct":4.93,"pocet":11},{"id":10,"max":16492500,"min":14942250,"pct":6.73,"pocet":15},{"id":11,"max":18042750,"min":16492500,"pct":4.04,"pocet":9},{"id":12,"max":19593000,"min":18042750,"pct":5.38,"pocet":12},{"id":13,"max":21143250,"min":19593000,"pct":5.38,"pocet":12},{"id":14,"max":22693500,"min":21143250,"pct":1.79,"pocet":4},{"id":15,"max":24243750,"min":22693500,"pct":1.79,"pocet":4},{"id":16,"max":25794000,"min":24243750,"pct":4.04,"pocet":9},{"id":17,"max":27344250,"min":25794000,"pct":1.35,"pocet":3},{"id":18,"max":28894500,"min":27344250,"pct":0.45,"pocet":1},{"id":19,"max":30444750,"min":28894500,"pct":4.48,"pocet":10},{"id":20,"max":31995000,"min":30444750,"pct":0.45,"pocet":1},{"id":21,"max":33545250,"min":31995000,"pct":0.9,"pocet":2},{"id":22,"max":35095500,"min":33545250,"pct":0.9,"pocet":2},{"id":23,"max":36645750,"min":35095500,"pct":0,"pocet":0},{"id":24,"max":38196000,"min":36645750,"pct":0,"pocet":0},{"id":25,"max":39746250,"min":38196000,"pct":0.9,"pocet":2},{"id":26,"max":41296500,"min":39746250,"pct":3.59,"pocet":8},{"id":27,"max":42846750,"min":41296500,"pct":0,"pocet":0},{"id":28,"max":44397000,"min":42846750,"pct":0,"pocet":0},{"id":29,"max":45947250,"min":44397000,"pct":0.9,"pocet":2},{"id":30,"max":47497500,"min":45947250,"pct":0,"pocet":0},{"id":31,"max":49047750,"min":47497500,"pct":0,"pocet":0},{"id":32,"max":50598000,"min":49047750,"pct":0.9,"pocet":2},{"id":33,"max":52148250,"min":50598000,"pct":0.45,"pocet":1},{"id":34,"max":53698500,"min":52148250,"pct":0,"pocet":0},{"id":35,"max":55248750,"min":53698500,"pct":0.45,"pocet":1},{"id":36,"max":56799000,"min":55248750,"pct":0,"pocet":0},{"id":37,"max":58349250,"min":56799000,"pct":0,"pocet":0},{"id":38,"max":59899500,"min":58349250,"pct":0,"pocet":0},{"id":39,"max":160000000,"min":63000000,"pct":2.69,"pocet":6}] }} %} -
<div class="f-range" data-min="0" data-max="160000000" data-min-start="12458632" data-max-start="42900000" data-step="1000"> <div class="f-range-slider-histogram-element"> <div class="f-range__histogram"> <div class="f-range__histogram-column" style="height: 35.294117647058826%;" data-min-pct="0" data-max-pct="2.5"></div> <div class="f-range__histogram-column" style="height: 52.94117647058824%;" data-min-pct="2.5" data-max-pct="5"></div> <div class="f-range__histogram-column" style="height: 70.58823529411765%;" data-min-pct="5" data-max-pct="7.5"></div> <div class="f-range__histogram-column" style="height: 100%;" data-min-pct="7.5" data-max-pct="10"></div> <div class="f-range__histogram-column" style="height: 70.58823529411765%;" data-min-pct="10" data-max-pct="12.5"></div> <div class="f-range__histogram-column" style="height: 88.23529411764706%;" data-min-pct="12.5" data-max-pct="15"></div> <div class="f-range__histogram-column" style="height: 82.35294117647058%;" data-min-pct="15" data-max-pct="17.5"></div> <div class="f-range__histogram-column" style="height: 41.17647058823529%;" data-min-pct="17.5" data-max-pct="20"></div> <div class="f-range__histogram-column" style="height: 70.58823529411765%;" data-min-pct="20" data-max-pct="22.5"></div> <div class="f-range__histogram-column" style="height: 64.70588235294117%;" data-min-pct="22.5" data-max-pct="25"></div> <div class="f-range__histogram-column" style="height: 88.23529411764706%;" data-min-pct="25" data-max-pct="27.500000000000004"></div> <div class="f-range__histogram-column" style="height: 52.94117647058824%;" data-min-pct="27.500000000000004" data-max-pct="30"></div> <div class="f-range__histogram-column" style="height: 70.58823529411765%;" data-min-pct="30" data-max-pct="32.5"></div> <div class="f-range__histogram-column" style="height: 70.58823529411765%;" data-min-pct="32.5" data-max-pct="35"></div> <div class="f-range__histogram-column" style="height: 23.52941176470588%;" data-min-pct="35" data-max-pct="37.5"></div> <div class="f-range__histogram-column" style="height: 23.52941176470588%;" data-min-pct="37.5" data-max-pct="40"></div> <div class="f-range__histogram-column" style="height: 52.94117647058824%;" data-min-pct="40" data-max-pct="42.5"></div> <div class="f-range__histogram-column" style="height: 17.647058823529413%;" data-min-pct="42.5" data-max-pct="45"></div> <div class="f-range__histogram-column" style="height: 5.88235294117647%;" data-min-pct="45" data-max-pct="47.5"></div> <div class="f-range__histogram-column" style="height: 58.82352941176471%;" data-min-pct="47.5" data-max-pct="50"></div> <div class="f-range__histogram-column" style="height: 5.88235294117647%;" data-min-pct="50" data-max-pct="52.5"></div> <div class="f-range__histogram-column" style="height: 11.76470588235294%;" data-min-pct="52.5" data-max-pct="55.00000000000001"></div> <div class="f-range__histogram-column" style="height: 11.76470588235294%;" data-min-pct="55.00000000000001" data-max-pct="57.49999999999999"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="57.49999999999999" data-max-pct="60"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="60" data-max-pct="62.5"></div> <div class="f-range__histogram-column" style="height: 11.76470588235294%;" data-min-pct="62.5" data-max-pct="65"></div> <div class="f-range__histogram-column" style="height: 47.05882352941176%;" data-min-pct="65" data-max-pct="67.5"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="67.5" data-max-pct="70"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="70" data-max-pct="72.5"></div> <div class="f-range__histogram-column" style="height: 11.76470588235294%;" data-min-pct="72.5" data-max-pct="75"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="75" data-max-pct="77.5"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="77.5" data-max-pct="80"></div> <div class="f-range__histogram-column" style="height: 11.76470588235294%;" data-min-pct="80" data-max-pct="82.5"></div> <div class="f-range__histogram-column" style="height: 5.88235294117647%;" data-min-pct="82.5" data-max-pct="85"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="85" data-max-pct="87.5"></div> <div class="f-range__histogram-column" style="height: 5.88235294117647%;" data-min-pct="87.5" data-max-pct="90"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="90" data-max-pct="92.5"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="92.5" data-max-pct="95"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="95" data-max-pct="97.5"></div> <div class="f-range__histogram-column" style="height: 35.294117647058826%;" data-min-pct="97.5" data-max-pct="100"></div> </div> <div class="f-range__slider"></div> </div> <div class="f-range__inputs"> <div class="f-range__input --min" data-prefix="Od" data-suffix="" > <input type="text" name="price-min" value="12458632"> </div> <div class="f-range__input --max" data-prefix="Do" data-suffix="" > <input type="text" name="price-max" placeholder="Neomezeno" value="42900000"> </div> </div> </div>
With histogram - more columns
-
-
{% include "@Components/forms/range-field/range-field.twig" with {props: { name: "price", min: { value: 0, start: 12440000, prefix: "Od", }, max: { value: 63000000, start: 30097000, prefix: "Do" }, step: 1000, histogram: [ {"id":0,"max":880000,"min":280000,"pct":1.12,"pocet":2}, {"id":1,"max":1480000,"min":880000,"pct":1.68,"pocet":4}, {"id":2,"max":2080000,"min":1480000,"pct":2.15,"pocet":5}, {"id":3,"max":2680000,"min":2080000,"pct":1.83,"pocet":4}, {"id":4,"max":3280000,"min":2680000,"pct":2.47,"pocet":6}, {"id":5,"max":3880000,"min":3280000,"pct":2.89,"pocet":7}, {"id":6,"max":4480000,"min":3880000,"pct":3.24,"pocet":8}, {"id":7,"max":5080000,"min":4480000,"pct":2.96,"pocet":7}, {"id":8,"max":5680000,"min":5080000,"pct":2.31,"pocet":5}, {"id":9,"max":6280000,"min":5680000,"pct":2.75,"pocet":6}, {"id":10,"max":6880000,"min":6280000,"pct":2.54,"pocet":6}, {"id":11,"max":7480000,"min":6880000,"pct":2.82,"pocet":7}, {"id":12,"max":8080000,"min":7480000,"pct":3.18,"pocet":8}, {"id":13,"max":8680000,"min":8080000,"pct":2.96,"pocet":7}, {"id":14,"max":9280000,"min":8680000,"pct":3.32,"pocet":8}, {"id":15,"max":9880000,"min":9280000,"pct":2.89,"pocet":7}, {"id":16,"max":10480000,"min":9880000,"pct":1.92,"pocet":4}, {"id":17,"max":11080000,"min":10480000,"pct":1.47,"pocet":3}, {"id":18,"max":11680000,"min":11080000,"pct":2.15,"pocet":5}, {"id":19,"max":12280000,"min":11680000,"pct":2.36,"pocet":6}, {"id":20,"max":12880000,"min":12280000,"pct":2.54,"pocet":6}, {"id":21,"max":13480000,"min":12880000,"pct":2.82,"pocet":7}, {"id":22,"max":14080000,"min":13480000,"pct":2.15,"pocet":5}, {"id":23,"max":14680000,"min":14080000,"pct":2.61,"pocet":6}, {"id":24,"max":15280000,"min":14680000,"pct":3.24,"pocet":8}, {"id":25,"max":15880000,"min":15280000,"pct":2.96,"pocet":7}, {"id":26,"max":16480000,"min":15880000,"pct":2.31,"pocet":5}, {"id":27,"max":17080000,"min":16480000,"pct":2.15,"pocet":5}, {"id":28,"max":17680000,"min":17080000,"pct":2.36,"pocet":6}, {"id":29,"max":18280000,"min":17680000,"pct":1.83,"pocet":4}, {"id":30,"max":18880000,"min":18280000,"pct":2.54,"pocet":6}, {"id":31,"max":19480000,"min":18880000,"pct":2.75,"pocet":7}, {"id":32,"max":20080000,"min":19480000,"pct":2.47,"pocet":6}, {"id":33,"max":20680000,"min":20080000,"pct":2.82,"pocet":7}, {"id":34,"max":21280000,"min":20680000,"pct":1.47,"pocet":3}, {"id":35,"max":21880000,"min":21280000,"pct":1.28,"pocet":3}, {"id":36,"max":22480000,"min":21880000,"pct":0.95,"pocet":2}, {"id":37,"max":23080000,"min":22480000,"pct":0.84,"pocet":2}, {"id":38,"max":23680000,"min":23080000,"pct":0.98,"pocet":2}, {"id":39,"max":24280000,"min":23680000,"pct":0.87,"pocet":2}, {"id":40,"max":24880000,"min":24280000,"pct":1.65,"pocet":4}, {"id":41,"max":25480000,"min":24880000,"pct":2.31,"pocet":5}, {"id":42,"max":26080000,"min":25480000,"pct":0.98,"pocet":2}, {"id":43,"max":26680000,"min":26080000,"pct":0.42,"pocet":1}, {"id":44,"max":27280000,"min":26680000,"pct":0.51,"pocet":1}, {"id":45,"max":27880000,"min":27280000,"pct":0.38,"pocet":1}, {"id":46,"max":28480000,"min":27880000,"pct":0.47,"pocet":1}, {"id":47,"max":29080000,"min":28480000,"pct":0.43,"pocet":1}, {"id":48,"max":29680000,"min":29080000,"pct":2.18,"pocet":5}, {"id":49,"max":30280000,"min":29680000,"pct":2.36,"pocet":5}, {"id":50,"max":30880000,"min":30280000,"pct":0.51,"pocet":1}, {"id":51,"max":31480000,"min":30880000,"pct":0.33,"pocet":0}, {"id":52,"max":32080000,"min":31480000,"pct":0.38,"pocet":1}, {"id":53,"max":32680000,"min":32080000,"pct":0.47,"pocet":1}, {"id":54,"max":33280000,"min":32680000,"pct":0.51,"pocet":1}, {"id":55,"max":33880000,"min":33280000,"pct":0.42,"pocet":1}, {"id":56,"max":34480000,"min":33880000,"pct":0.29,"pocet":0}, {"id":57,"max":35080000,"min":34480000,"pct":0.25,"pocet":0}, {"id":58,"max":35680000,"min":35080000,"pct":0.21,"pocet":0}, {"id":59,"max":36280000,"min":35680000,"pct":0.17,"pocet":0}, {"id":60,"max":36880000,"min":36280000,"pct":0.13,"pocet":0}, {"id":61,"max":37480000,"min":36880000,"pct":0.09,"pocet":0}, {"id":62,"max":38080000,"min":37480000,"pct":0.42,"pocet":1}, {"id":63,"max":38680000,"min":38080000,"pct":0.47,"pocet":1}, {"id":64,"max":39280000,"min":38680000,"pct":0.84,"pocet":2}, {"id":65,"max":39880000,"min":39280000,"pct":0.95,"pocet":2}, {"id":66,"max":40480000,"min":39880000,"pct":0.87,"pocet":2}, {"id":67,"max":41080000,"min":40480000,"pct":0.92,"pocet":2}, {"id":68,"max":41680000,"min":41080000,"pct":0.25,"pocet":0}, {"id":69,"max":42280000,"min":41680000,"pct":0.21,"pocet":0}, {"id":70,"max":42880000,"min":42280000,"pct":0.17,"pocet":0}, {"id":71,"max":43480000,"min":42880000,"pct":0.13,"pocet":0}, {"id":72,"max":44080000,"min":43480000,"pct":0.09,"pocet":0}, {"id":73,"max":44680000,"min":44080000,"pct":0.38,"pocet":1}, {"id":74,"max":45280000,"min":44680000,"pct":0.42,"pocet":1}, {"id":75,"max":45880000,"min":45280000,"pct":0.17,"pocet":0}, {"id":76,"max":46480000,"min":45880000,"pct":0.13,"pocet":0}, {"id":77,"max":47080000,"min":46480000,"pct":0.09,"pocet":0}, {"id":78,"max":47680000,"min":47080000,"pct":0.05,"pocet":0}, {"id":79,"max":160000000,"min":47680000,"pct":2.75,"pocet":6} ] }} %} -
<div class="f-range" data-min="0" data-max="63000000" data-min-start="12440000" data-max-start="30097000" data-step="1000"> <div class="f-range-slider-histogram-element"> <div class="f-range__histogram"> <div class="f-range__histogram-column" style="height: 25%;" data-min-pct="0" data-max-pct="1.25"></div> <div class="f-range__histogram-column" style="height: 50%;" data-min-pct="1.25" data-max-pct="2.5"></div> <div class="f-range__histogram-column" style="height: 62.5%;" data-min-pct="2.5" data-max-pct="3.75"></div> <div class="f-range__histogram-column" style="height: 50%;" data-min-pct="3.75" data-max-pct="5"></div> <div class="f-range__histogram-column" style="height: 75%;" data-min-pct="5" data-max-pct="6.25"></div> <div class="f-range__histogram-column" style="height: 87.5%;" data-min-pct="6.25" data-max-pct="7.5"></div> <div class="f-range__histogram-column" style="height: 100%;" data-min-pct="7.5" data-max-pct="8.75"></div> <div class="f-range__histogram-column" style="height: 87.5%;" data-min-pct="8.75" data-max-pct="10"></div> <div class="f-range__histogram-column" style="height: 62.5%;" data-min-pct="10" data-max-pct="11.25"></div> <div class="f-range__histogram-column" style="height: 75%;" data-min-pct="11.25" data-max-pct="12.5"></div> <div class="f-range__histogram-column" style="height: 75%;" data-min-pct="12.5" data-max-pct="13.750000000000002"></div> <div class="f-range__histogram-column" style="height: 87.5%;" data-min-pct="13.750000000000002" data-max-pct="15"></div> <div class="f-range__histogram-column" style="height: 100%;" data-min-pct="15" data-max-pct="16.25"></div> <div class="f-range__histogram-column" style="height: 87.5%;" data-min-pct="16.25" data-max-pct="17.5"></div> <div class="f-range__histogram-column" style="height: 100%;" data-min-pct="17.5" data-max-pct="18.75"></div> <div class="f-range__histogram-column" style="height: 87.5%;" data-min-pct="18.75" data-max-pct="20"></div> <div class="f-range__histogram-column" style="height: 50%;" data-min-pct="20" data-max-pct="21.25"></div> <div class="f-range__histogram-column" style="height: 37.5%;" data-min-pct="21.25" data-max-pct="22.5"></div> <div class="f-range__histogram-column" style="height: 62.5%;" data-min-pct="22.5" data-max-pct="23.75"></div> <div class="f-range__histogram-column" style="height: 75%;" data-min-pct="23.75" data-max-pct="25"></div> <div class="f-range__histogram-column" style="height: 75%;" data-min-pct="25" data-max-pct="26.25"></div> <div class="f-range__histogram-column" style="height: 87.5%;" data-min-pct="26.25" data-max-pct="27.500000000000004"></div> <div class="f-range__histogram-column" style="height: 62.5%;" data-min-pct="27.500000000000004" data-max-pct="28.749999999999996"></div> <div class="f-range__histogram-column" style="height: 75%;" data-min-pct="28.749999999999996" data-max-pct="30"></div> <div class="f-range__histogram-column" style="height: 100%;" data-min-pct="30" data-max-pct="31.25"></div> <div class="f-range__histogram-column" style="height: 87.5%;" data-min-pct="31.25" data-max-pct="32.5"></div> <div class="f-range__histogram-column" style="height: 62.5%;" data-min-pct="32.5" data-max-pct="33.75"></div> <div class="f-range__histogram-column" style="height: 62.5%;" data-min-pct="33.75" data-max-pct="35"></div> <div class="f-range__histogram-column" style="height: 75%;" data-min-pct="35" data-max-pct="36.25"></div> <div class="f-range__histogram-column" style="height: 50%;" data-min-pct="36.25" data-max-pct="37.5"></div> <div class="f-range__histogram-column" style="height: 75%;" data-min-pct="37.5" data-max-pct="38.75"></div> <div class="f-range__histogram-column" style="height: 87.5%;" data-min-pct="38.75" data-max-pct="40"></div> <div class="f-range__histogram-column" style="height: 75%;" data-min-pct="40" data-max-pct="41.25"></div> <div class="f-range__histogram-column" style="height: 87.5%;" data-min-pct="41.25" data-max-pct="42.5"></div> <div class="f-range__histogram-column" style="height: 37.5%;" data-min-pct="42.5" data-max-pct="43.75"></div> <div class="f-range__histogram-column" style="height: 37.5%;" data-min-pct="43.75" data-max-pct="45"></div> <div class="f-range__histogram-column" style="height: 25%;" data-min-pct="45" data-max-pct="46.25"></div> <div class="f-range__histogram-column" style="height: 25%;" data-min-pct="46.25" data-max-pct="47.5"></div> <div class="f-range__histogram-column" style="height: 25%;" data-min-pct="47.5" data-max-pct="48.75"></div> <div class="f-range__histogram-column" style="height: 25%;" data-min-pct="48.75" data-max-pct="50"></div> <div class="f-range__histogram-column" style="height: 50%;" data-min-pct="50" data-max-pct="51.24999999999999"></div> <div class="f-range__histogram-column" style="height: 62.5%;" data-min-pct="51.24999999999999" data-max-pct="52.5"></div> <div class="f-range__histogram-column" style="height: 25%;" data-min-pct="52.5" data-max-pct="53.75"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="53.75" data-max-pct="55.00000000000001"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="55.00000000000001" data-max-pct="56.25"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="56.25" data-max-pct="57.49999999999999"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="57.49999999999999" data-max-pct="58.75"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="58.75" data-max-pct="60"></div> <div class="f-range__histogram-column" style="height: 62.5%;" data-min-pct="60" data-max-pct="61.25000000000001"></div> <div class="f-range__histogram-column" style="height: 62.5%;" data-min-pct="61.25000000000001" data-max-pct="62.5"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="62.5" data-max-pct="63.74999999999999"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="63.74999999999999" data-max-pct="65"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="65" data-max-pct="66.25"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="66.25" data-max-pct="67.5"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="67.5" data-max-pct="68.75"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="68.75" data-max-pct="70"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="70" data-max-pct="71.25"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="71.25" data-max-pct="72.5"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="72.5" data-max-pct="73.75"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="73.75" data-max-pct="75"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="75" data-max-pct="76.25"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="76.25" data-max-pct="77.5"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="77.5" data-max-pct="78.75"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="78.75" data-max-pct="80"></div> <div class="f-range__histogram-column" style="height: 25%;" data-min-pct="80" data-max-pct="81.25"></div> <div class="f-range__histogram-column" style="height: 25%;" data-min-pct="81.25" data-max-pct="82.5"></div> <div class="f-range__histogram-column" style="height: 25%;" data-min-pct="82.5" data-max-pct="83.75"></div> <div class="f-range__histogram-column" style="height: 25%;" data-min-pct="83.75" data-max-pct="85"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="85" data-max-pct="86.25"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="86.25" data-max-pct="87.5"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="87.5" data-max-pct="88.75"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="88.75" data-max-pct="90"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="90" data-max-pct="91.25"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="91.25" data-max-pct="92.5"></div> <div class="f-range__histogram-column" style="height: 12.5%;" data-min-pct="92.5" data-max-pct="93.75"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="93.75" data-max-pct="95"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="95" data-max-pct="96.25"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="96.25" data-max-pct="97.5"></div> <div class="f-range__histogram-column" style="height: 0%;" data-min-pct="97.5" data-max-pct="98.75"></div> <div class="f-range__histogram-column" style="height: 75%;" data-min-pct="98.75" data-max-pct="100"></div> </div> <div class="f-range__slider"></div> </div> <div class="f-range__inputs"> <div class="f-range__input --min" data-prefix="Od" data-suffix="" > <input type="text" name="price-min" value="12440000"> </div> <div class="f-range__input --max" data-prefix="Do" data-suffix="" > <input type="text" name="price-max" placeholder="Neomezeno" value="30097000"> </div> </div> </div>
Schema