[Bug]: Slider DefaultValue and Production Build Histogram Issues

[amit-cashify]

Describe the bug

There are two related issues with the Slider component in Evidence.dev when used for adjusting histogram bucket sizes:

1. Slider DefaultValue Issue:

   • When setting the defaultValue property on the slider, the displayed value does not update even though the slider marker moves.
   • When the defaultValue property is removed, the slider works as expected, and changes correctly affect the data.

2. Production Build (npm run build && npm run preview) Issues:

   • When the slider is set to 1, the histogram data only returns one row instead of 100, even though the expected output should be 100 rows.
   • When selecting any other slider value (2-25), the data is displayed correctly.
   • The x-axis min/max values (0-100) are not respected, and all bars are squeezed into a small section, making the chart unreadable. This does not happen in the dev server (npm exec evidence dev), where the histogram renders correctly.

Image 1: Dev Mode - Slider @ 1

Image 2: Dev Mode - Slider @ 5

Image 3: Prod Mode - Slider @ 1

Image 4: Prod Mode - Slider @ 5

Steps to Reproduce

Steps to Reproduce

1. Slider DefaultValue Issue

1. Set the defaultValue prop on the Slider component:

   <Slider title="Step" name=step min=1 max=25 step=1 defaultValue=5 />
   

2. Move the slider → The displayed value does not update.
3. Remove defaultValue and test again → The slider updates correctly.

2. Production Build Issues

1. Run the dev server:

   npm exec evidence dev
   

   • The histogram updates correctly with different step values.
2. Run the production build:

   npm run build && npm run preview
   

   • Set the slider to 1 → Only one row appears instead of 100.
   • Set the slider to any other value (2-25) → The data displays correctly.
   • The x-axis settings (min=0, max=100) are ignored, squeezing the bars into a narrow section.

---

Reproduction

Relevant Code from severity_data.md

<Slider
    title="Step"
    name=step
    min=1
    max=25
    step=1
/>

<BarChart
    data={histogram_data}
    x=score_bucket
    y=count
    yFmt=num0
    xAxisTitle="Severity Score"
    yAxisTitle="Count"
    echartsOptions={{
        xAxis: {
            min: 0,
            max: 100
        }
    }}
    labels=true
    labelFmt=num0
/>

DuckDB Query for Histogram Data in MD file

with bucket_ranges as (
    select
        (${inputs.step} * floor(cast(round_score as float) / ${inputs.step})) + (${inputs.step} / 2.0) as score_bucket,
        ${inputs.step} * floor(cast(round_score as float) / ${inputs.step}) as range_start,
        ${inputs.step} * floor(cast(round_score as float) / ${inputs.step}) + ${inputs.step} as range_end,
        sum(cast(interval_count as integer)) as count,
        sum(cast(interval_count as float)) * 100.0 / nullif(sum(sum(cast(interval_count as float))) over (), 0) as percentage
    from ch_prod.severity_data_density
    where question = '${inputs.Question.value}'
      and side = '${inputs.Side.value}'
    group by score_bucket, range_start, range_end
)
select
    score_bucket,
    range_start || '-' || range_end as score_range,
    count,
    round(percentage, 1) as percentage
from bucket_ranges
order by score_bucket;

Logs

_No specific logs observed, but issue is consistent across different `.md` pages._

This issue may have been introduced by the latest version that I have upgraded to. Since I did not have this issue before.

System Info

---

### **System Info**
Output of `npx envinfo --system --binaries --browsers --npmPackages`

  System:
    OS: macOS 15.1.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 365.63 MB / 16.00 GB
    Shell: 5.2.37 - /usr/local/bin/bash
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
  Browsers:
    Chrome: 132.0.6834.160
    Safari: 18.1.1
  npmPackages:
    @evidence-dev/bigquery: ^2.0.8 => 2.0.8 
    @evidence-dev/core-components: ^5.1.1 => 5.1.1 
    @evidence-dev/csv: ^1.0.13 => 1.0.13 
    @evidence-dev/databricks: ^1.0.7 => 1.0.7 
    @evidence-dev/duckdb: ^1.0.12 => 1.0.12 
    @evidence-dev/evidence: ^40.0.7 => 40.0.7 
    @evidence-dev/motherduck: ^1.0.3 => 1.0.3 
    @evidence-dev/mssql: ^1.1.1 => 1.1.1 
    @evidence-dev/mysql: ^1.1.3 => 1.1.3 
    @evidence-dev/postgres: ^1.0.6 => 1.0.6 
    @evidence-dev/snowflake: ^1.2.1 => 1.2.1 
    @evidence-dev/sqlite: ^2.0.6 => 2.0.6 
    @evidence-dev/trino: ^1.0.8 => 1.0.8 
    evidence-connector-clickhouse: ^0.0.2 => 0.0.2 
    serve: ^14.2.4 => 14.2.4

Severity

serious, but I can work around it

Additional Information, or Workarounds

• Workaround: Removing defaultValue from the Slider resolves part of the issue in dev mode.
• Remaining issue: Histogram bars still compress in production builds, and selecting step = 1 results in only one row instead of 100.

Formatted and grammar corrected with the help of ChatGPT

[clementlefevre]

Just to confirm that indeed with the @evidence-dev/evidence": "^40.1.2" the default value for the slider does not trigger update on the data. I switched to dropdown as a workaround.