stack/src/components/fields/range-slider-field/range-slider-field.twig line 1

Open in your IDE?
  1. {%- set class_name = [
  2.   "f-range-slider",
  3.   "u-posr u-z-index-1 d-flex flex-column gap-1",
  4.   props.disabled ? "--disabled" : null,
  5.   props.extra_class ? props.extra_class : null,
  6. ]|join(' ')|trim -%}
  8. {%- set attrs = [
  9.   'class="' ~ class_name ~ '"',
  10. ] -%}
  12. {%- if props.id is defined %}
  13.   {%- set attrs = attrs|merge(['id="' ~ props.id ~ '"']) -%}
  14. {%- endif -%}
  16. {%- if props.disabled == true %}
  17.   {% set attrs = attrs|merge(['disabled']) %}
  18. {%- endif -%}
  20. {%- if props.data is defined -%}
  21.   {%- set data_attrs = [] -%}
  22.   {%- for key, attribute in props.data -%}
  23.     {%- set data_attrs = data_attrs|merge(['data-' ~ key ~ '="' ~ attribute ~ '"']) -%}
  24.   {%- endfor -%}
  25.   {%- set data_attrs = data_attrs|join(' ')|trim -%}
  26.   {%- set attrs = attrs|merge([data_attrs]) -%}
  27. {%- endif -%}
  29. {%- set attrs = attrs|join(' ')|trim -%}
  31. {# Input attrs #}
  33. {%- set class_name_range = [
  34.   "f-range-slider__range",
  35.   "u-posa"
  36. ]|join(' ')|trim -%}
  38. {%- set attrs_input = [] -%}
  40. {%- if props.required == true %}
  41.   {%- set attrs_input = attrs_input|merge(['required']) -%}
  42. {%- endif -%}
  44. {%- if props.disabled == true %}
  45.   {%- set attrs_input = attrs_input|merge(['disabled']) -%}
  46. {%- endif -%}
  48. {%- if props.readonly == true %}
  49.   {%- set attrs_input = attrs_input|merge(['readonly']) -%}
  50. {%- endif -%}
  52. {%- if props.min is defined %}
  53.   {%- set attrs_input = attrs_input|merge(['min="' ~ props.min ~ '"']) -%}
  54. {%- endif -%}
  56. {%- if props.max is defined %}
  57.   {%- set attrs_input = attrs_input|merge(['max="' ~ props.max ~ '"']) -%}
  58. {%- endif -%}
  60. {%- if props.step is defined %}
  61.   {%- set attrs_input = attrs_input|merge(['step="' ~ props.step ~ '"']) -%}
  62. {%- endif -%}
  64. {%- set attrs_from = [] -%}
  66. {%- if props.from.full_name is defined %}
  67.   {%- set attrs_from = attrs_from|merge(['name="' ~ props.from.full_name ~ '"']) -%}
  68. {%- endif -%}
  70. {%- if props.from.value is defined %}
  71.   {%- set attrs_from = attrs_from|merge(['value="' ~ props.from.value ~ '"']) -%}
  72. {%- endif -%}
  74. {%- if props.from.id is defined %}
  75.   {%- set attrs_from = attrs_from|merge(['id="' ~ props.from.id ~ '"']) -%}
  76. {%- endif -%}
  79. {%- set attrs_to = [] -%}
  81. {%- if props.to.full_name is defined %}
  82.   {%- set attrs_to = attrs_to|merge(['name="' ~ props.to.full_name ~ '"']) -%}
  83. {%- endif -%}
  85. {%- if props.to.value is defined %}
  86.   {%- set attrs_to = attrs_to|merge(['value="' ~ props.to.value ~ '"']) -%}
  87. {%- endif -%}
  89. {%- if props.to.id is defined %}
  90.   {%- set attrs_to = attrs_to|merge(['id="' ~ props.to.id ~ '"']) -%}
  91. {%- endif -%}
  93. {%- set attrs_from = attrs_from|merge(attrs_input) -%}
  95. {%- set attrs_to = attrs_to|merge(attrs_input) -%}
  97. {%- set attrs_range_from = [
  98.   'class="' ~ class_name_range ~ ' --from"',
  99.   'type="range"'
  100. ]|merge(attrs_from)|join(' ')|trim -%}
  102. {%- set attrs_range_to = [
  103.   'class="' ~ class_name_range ~ ' --to"',
  104.   'type="range"'
  105. ]|merge(attrs_to)|join(' ')|trim -%}
  107. <div {{ attrs|raw }}>
  109.   {% if props.label %}
  110.     {% include "@Components/fields/label-field/label-field.twig" with {props: {
  111.       title: props.label,
  112.       id: props.id,
  113.       required: props.required,
  114.     }} %}
  115.   {% endif %}
  117.   <div class="f-range-slider__ranges u-posr">
  118.     <div class="f-range-slider__range-wrap --from u-posr">
  119.       <input {{ attrs_range_from|raw }}>
  120.     </div>
  121.     <div class="f-range-slider__range-wrap --to u-posr">
  122.       <input {{ attrs_range_to|raw }}>
  123.     </div>
  124.     <div class="f-range-slider__label --from u-posa u-color-primary-500 u-fz-xs"></div>
  125.     <div class="f-range-slider__label --to u-posa u-color-primary-500 u-fz-xs"></div>
  126.   </div>
  128.   <div class="f-range-slider__inputs d-flex justify-content-between gap-2">
  129.     {% include "@Components/fields/text-field/text-field.twig" with {props: {
  130.       type: "number",
  131.       value: props.from.value,
  132.       extra_class: "f-range-slider__control w-100 --from"
  133.     }} %}
  135.     {% include "@Components/fields/text-field/text-field.twig" with {props: {
  136.       type: "number",
  137.       value: props.to.value,
  138.       extra_class: "f-range-slider__control w-100 --to"
  139.     }} %}
  140.   </div>
  142.   {% include "@Components/fields/error-field/error-field.twig" with {props: {}} %}
  143. </div>