Dual range slider #467
Open
Dual range slider #467
+1,644
−58
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Greptile SummaryThis PR successfully adds a dual range slider component ( Key Changes:
Technical Quality:
Confidence Score: 5/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant Browser
participant LiveView
participant Input/Field Component
participant Alpine.js
User->>Browser: Load page with dual range slider
Browser->>LiveView: Request page
LiveView->>Input/Field Component: Render range-dual type
Input/Field Component->>Input/Field Component: calculate_slider_position() for initial values
Input/Field Component->>Input/Field Component: Jason.encode!() for safe JS interpolation
Input/Field Component->>Browser: Return HTML with x-data, phx-update="ignore"
Browser->>Alpine.js: Initialize component ($nextTick)
Alpine.js->>Alpine.js: init() -> updateRange()
Alpine.js->>Browser: Calculate and render slider track positions
User->>Browser: Drag min/max slider thumb
Browser->>Alpine.js: @input event triggered
Alpine.js->>Alpine.js: updateMinValue/updateMaxValue()
Alpine.js->>Alpine.js: Validate (min <= max)
Alpine.js->>Alpine.js: updateRange() - recalculate positions
Alpine.js->>Browser: Update visual track position
Alpine.js->>Browser: Update displayed values (x-text)
User->>Browser: Submit form
Browser->>LiveView: POST with min/max field values
LiveView->>LiveView: Process form data
Note over LiveView,Alpine.js: phx-update="ignore" prevents LiveView from overwriting Alpine state
|
Greptile's behavior is changing!From now on, if a review finishes with no comments, we will not post an additional "statistics" comment to confirm that our review found nothing to comment on. However, you can confirm that we reviewed your changes in the status check section. This feature can be toggled off in your Code Review Settings by deselecting "Create a status check for each PR". |
- Prevents ArithmeticError when range_min equals range_max - Matches the fix already applied to field.ex - Ensures dual range slider edge case test passes
- Replace incorrect pc_used_input? implementation with Phoenix.Component.used_input? - Update dual range slider error test to include field in params - All tests now passing Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
nhobes
force-pushed
the
dual-range-slider
branch
from
ca64f7d to
8cf8160
Compare
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #467 +/- ##
==========================================
+ Coverage 89.73% 90.00% +0.27%
==========================================
Files 37 37
Lines 1607 1801 +194
==========================================
+ Hits 1442 1621 +179
- Misses 165 180 +15 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
- Add 23 new tests covering form.ex, input.ex, and field.ex implementations - Fix missing attribute definitions in form.ex for dual range support - Add division-by-zero guard in calculate_slider_position helper - Test coverage for nil values, negative ranges, custom steps, formatters - Test coverage for both range-dual and range-numeric types - All 323 tests passing This significantly improves codecov coverage for the dual range slider feature. Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
mplatts
reviewed
Jan 15, 2026
| max_value = @max_field.value || @range_max | ||
|
|
||
| # Get formatter function | ||
| formatter = assigns[:formatter] || (&to_string/1) |
Contributor
There was a problem hiding this comment.
don't use assigns in the template. assign in the live view (assign(socket, formatter: blah))
mplatts
reviewed
Jan 15, 2026
| <.form_label form={@form} field={@field} label={@label} class={@label_class} /> | ||
| <% | ||
| # Set default values if nil | ||
| min_value = @min_field.value || @range_min |
Contributor
There was a problem hiding this comment.
i don't think it's good to assign variables in the template. maybe do it in the live view
mplatts
reviewed
Jan 15, 2026
Comment on lines
+964
to
+985
| # Helper functions for dual range slider | ||
| defp calculate_slider_position(nil, _range_min, _range_max), do: 0 | ||
|
|
||
| # Guard against division by zero when range_min == range_max | ||
| defp calculate_slider_position(_value, range_min, range_max) | ||
| when range_min == range_max, | ||
| do: 0 | ||
|
|
||
| defp calculate_slider_position(value, range_min, range_max) when is_integer(value) do | ||
| round((value - range_min) / (range_max - range_min) * 100) | ||
| end | ||
|
|
||
| defp calculate_slider_position(value, range_min, range_max) do | ||
| value = | ||
| case value do | ||
| v when is_binary(v) -> String.to_integer(v) | ||
| v when is_integer(v) -> v | ||
| _ -> range_min | ||
| end | ||
|
|
||
| round((value - range_min) / (range_max - range_min) * 100) | ||
| end |
Contributor
There was a problem hiding this comment.
Put all this in a new component .range_dual
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Core Implementation
type="range-dual") using Alpine.js for client-side interactivityinput.ex,field.ex, andform.exfor consistent API across component variantsTechnical Improvements
phx-update="ignore"to prevent LiveView/Alpine.js DOM conflicts$nextTick()wrapper for proper Alpine initialization timingJason.encode!()for safe JavaScript string interpolation (prevents injection)range_min == range_maxFeatures
format_value={&("$#{&1}")})nameattributes (no special handling required)