344344 < div class ="dropdown ">
345345 < button class ="btn btn-outline-primary dropdown-toggle d-flex align-items-center gap-2 " data-bs-toggle ="dropdown ">
346346 < span class ="value-display ">
347- {% translate "Price" %}: €{{ request.GET.min_value|default:"0" |floatformat:0|localize }} - €{{ request.GET.max_value|default:"10000" |floatformat:0|localize }}
347+ {% translate "Price" %}: €{{ request.GET.min_value|default:queryset_min_price |floatformat:0|localize }} - €{{ request.GET.max_value|default:queryset_max_price |floatformat:0|localize }}
348348 </ span >
349349 </ button >
350350 < div class ="dropdown-menu p-3 " style ="width: 300px; ">
351- < input type ="range " class ="form-range mb-2 " name ="min_value "
352- min ="0 " max ="10000 " step ="100 "
353- value ="{{ request.GET.min_value|default:'0' }} "
354- id ="valueMin ">
355- < input type ="range " class ="form-range mb-3 " name ="max_value "
356- min ="0 " max ="10000 " step ="100 "
357- value ="{{ request.GET.max_value|default:'10000' }} "
358- id ="valueMax ">
351+ < input type ="range " class ="form-range mb-2 "
352+ min ="0 " max ="100 " step ="1 "
353+ value ="0 "
354+ id ="valueMinSlider "
355+ data-queryset-min ="{{ queryset_min_price }} "
356+ data-queryset-max ="{{ queryset_max_price }} ">
357+ < input type ="range " class ="form-range mb-3 "
358+ min ="0 " max ="100 " step ="1 "
359+ value ="100 "
360+ id ="valueMaxSlider ">
361+ < input type ="hidden " name ="min_value " id ="valueMin " value ="{{ request.GET.min_value|default:queryset_min_price }} ">
362+ < input type ="hidden " name ="max_value " id ="valueMax " value ="{{ request.GET.max_value|default:queryset_max_price }} ">
359363 < div class ="d-flex justify-content-between value-labels small text-muted ">
360- < div > {% translate "Min" %}: €< span id ="valueMinLabel "> {{ request.GET.min_value|default:"0" |floatformat:0|localize }}</ span > </ div >
361- < div > {% translate "Max" %}: €< span id ="valueMaxLabel "> {{ request.GET.max_value|default:"10000" |floatformat:0|localize }}</ span > </ div >
364+ < div > {% translate "Min" %}: €< span id ="valueMinLabel "> {{ request.GET.min_value|default:queryset_min_price |floatformat:0|localize }}</ span > </ div >
365+ < div > {% translate "Max" %}: €< span id ="valueMaxLabel "> {{ request.GET.max_value|default:queryset_max_price |floatformat:0|localize }}</ span > </ div >
362366 </ div >
363367 </ div >
364368 </ div >
@@ -1323,23 +1327,43 @@ <h4 class="text-muted">{% translate "No assets found" %}</h4>
13231327}
13241328
13251329/**
1326- * Price range slider functionality
1330+ * Price range slider functionality with logarithmic scale
13271331 */
13281332function initializePriceRangeSliders ( ) {
1333+ const valueMinSlider = document . getElementById ( 'valueMinSlider' ) ;
1334+ const valueMaxSlider = document . getElementById ( 'valueMaxSlider' ) ;
13291335 const valueMin = document . getElementById ( 'valueMin' ) ;
13301336 const valueMax = document . getElementById ( 'valueMax' ) ;
13311337 const valueMinLabel = document . getElementById ( 'valueMinLabel' ) ;
13321338 const valueMaxLabel = document . getElementById ( 'valueMaxLabel' ) ;
13331339 const valueDisplay = document . querySelector ( '.value-display' ) ;
13341340
1335- if ( ! valueMin || ! valueMax || ! valueMinLabel || ! valueMaxLabel || ! valueDisplay ) return ;
1341+ if ( ! valueMinSlider || ! valueMaxSlider || ! valueMin || ! valueMax || ! valueMinLabel || ! valueMaxLabel || ! valueDisplay ) return ;
1342+
1343+ // Get dynamic price range from queryset
1344+ const MIN_PRICE = Number ( valueMinSlider . dataset . querysetMin ) || 0 ;
1345+ const MAX_PRICE = Number ( valueMinSlider . dataset . querysetMax ) || 10000 ;
1346+
1347+ // Logarithmic scale conversion functions
1348+ function sliderToPrice ( sliderValue ) {
1349+ // Use exponential function for smooth logarithmic scale
1350+ // Maps 0-100 slider to 0-10000 price with more granularity at lower values
1351+ const normalized = sliderValue / 100 ;
1352+ return Math . round ( MIN_PRICE + ( MAX_PRICE - MIN_PRICE ) * Math . pow ( normalized , 2 ) ) ;
1353+ }
1354+
1355+ function priceToSlider ( price ) {
1356+ // Reverse conversion from price to slider position
1357+ const normalized = ( price - MIN_PRICE ) / ( MAX_PRICE - MIN_PRICE ) ;
1358+ return Math . round ( Math . sqrt ( normalized ) * 100 ) ;
1359+ }
13361360
13371361 function updateValueLabels ( ) {
1338- const minValue = Number ( valueMin . value ) . toLocaleString ( 'nl-NL' ) ;
1339- const maxValue = Number ( valueMax . value ) . toLocaleString ( 'nl-NL' ) ;
1340- valueMinLabel . textContent = minValue ;
1341- valueMaxLabel . textContent = maxValue ;
1342- valueDisplay . textContent = '{% translate "Price" %}: €' + minValue + ' - €' + maxValue ;
1362+ const minPrice = Number ( valueMin . value ) ;
1363+ const maxPrice = Number ( valueMax . value ) ;
1364+ valueMinLabel . textContent = minPrice . toLocaleString ( 'nl-NL' ) ;
1365+ valueMaxLabel . textContent = maxPrice . toLocaleString ( 'nl-NL' ) ;
1366+ valueDisplay . textContent = '{% translate "Price" %}: €' + minPrice . toLocaleString ( 'nl-NL' ) + ' - €' + maxPrice . toLocaleString ( 'nl-NL' ) ;
13431367 }
13441368
13451369 function updateForm ( ) {
@@ -1350,19 +1374,33 @@ <h4 class="text-muted">{% translate "No assets found" %}</h4>
13501374 }
13511375
13521376 let timeout ;
1353- valueMin . addEventListener ( 'input' , function ( ) {
1354- if ( parseInt ( valueMin . value ) > parseInt ( valueMax . value ) ) {
1355- valueMin . value = valueMax . value ;
1377+ valueMinSlider . addEventListener ( 'input' , function ( ) {
1378+ const minPrice = sliderToPrice ( Number ( valueMinSlider . value ) ) ;
1379+ const maxPrice = Number ( valueMax . value ) ;
1380+
1381+ if ( minPrice > maxPrice ) {
1382+ valueMin . value = maxPrice ;
1383+ valueMinSlider . value = priceToSlider ( maxPrice ) ;
1384+ } else {
1385+ valueMin . value = minPrice ;
13561386 }
1387+
13571388 updateValueLabels ( ) ;
13581389 clearTimeout ( timeout ) ;
13591390 timeout = setTimeout ( updateForm , 500 ) ;
13601391 } ) ;
13611392
1362- valueMax . addEventListener ( 'input' , function ( ) {
1363- if ( parseInt ( valueMax . value ) < parseInt ( valueMin . value ) ) {
1364- valueMax . value = valueMin . value ;
1393+ valueMaxSlider . addEventListener ( 'input' , function ( ) {
1394+ const maxPrice = sliderToPrice ( Number ( valueMaxSlider . value ) ) ;
1395+ const minPrice = Number ( valueMin . value ) ;
1396+
1397+ if ( maxPrice < minPrice ) {
1398+ valueMax . value = minPrice ;
1399+ valueMaxSlider . value = priceToSlider ( minPrice ) ;
1400+ } else {
1401+ valueMax . value = maxPrice ;
13651402 }
1403+
13661404 updateValueLabels ( ) ;
13671405 clearTimeout ( timeout ) ;
13681406 timeout = setTimeout ( updateForm , 500 ) ;
@@ -1377,7 +1415,12 @@ <h4 class="text-muted">{% translate "No assets found" %}</h4>
13771415 } ) ;
13781416 } ) ;
13791417
1380- // Initialize with current values
1418+ // Initialize sliders with current price values
1419+ const currentMinPrice = Number ( valueMin . value ) || MIN_PRICE ;
1420+ const currentMaxPrice = Number ( valueMax . value ) || MAX_PRICE ;
1421+ valueMinSlider . value = priceToSlider ( currentMinPrice ) ;
1422+ valueMaxSlider . value = priceToSlider ( currentMaxPrice ) ;
1423+
13811424 updateValueLabels ( ) ;
13821425}
13831426
0 commit comments