From 6d66d57fc4ee49993b8861187b0489b3cbf3bede Mon Sep 17 00:00:00 2001
From: Min-Hsueh Chiu <peter810601@gmail.com>
Date: Wed, 4 Feb 2026 17:45:17 -0800
Subject: [PATCH 1/2] modify releasing workflow

---
 .github/workflows/publish-npm.yml                     | 10 ++++++----
 src/components/data-entry/RangeSlider/RangeSlider.tsx | 11 ++++++++++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/publish-npm.yml b/.github/workflows/publish-npm.yml
index 225226b3..4dc44368 100644
--- a/.github/workflows/publish-npm.yml
+++ b/.github/workflows/publish-npm.yml
@@ -1,9 +1,8 @@
 name: publish-npm
 on:
-  workflow_dispatch:
-  push:
-    tags:
-      - 'v*'
+  release:
+    types: [published]
+
 jobs:
   publish:
     runs-on: ubuntu-latest
@@ -29,6 +28,9 @@ jobs:
       - name: Build project
         run: |
           npm run build-publish
+      - name: Sync version from Git Tag
+        run: |
+          npm version ${{ github.ref_name }} --no-git-tag-version
       - name: Publish to NPM
         run: |
           echo Publishing to test repo $NODE_AUTH_TOKEN
diff --git a/src/components/data-entry/RangeSlider/RangeSlider.tsx b/src/components/data-entry/RangeSlider/RangeSlider.tsx
index 0dca3cc7..66f8d371 100644
--- a/src/components/data-entry/RangeSlider/RangeSlider.tsx
+++ b/src/components/data-entry/RangeSlider/RangeSlider.tsx
@@ -158,6 +158,14 @@ export interface RangeSliderProps {
    * Function to call when slider values change.
    */
   onChange?: (values: number[]) => void;
+  /**
+   * styles for input
+   */
+  styleInput?: object;
+  /**
+   * styles for slider
+   */
+  styleSlider?: object;
 }
 
 /**
@@ -258,6 +266,7 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
       <input
         data-testid="lower-bound-input"
         className="input is-small"
+        style={props.styleInput}
         type="number"
         value={inputValue}
         min={scale.domain()[0]}
@@ -265,7 +274,7 @@ export const RangeSlider: React.FC<RangeSliderProps> = ({
         step={props.step}
         onChange={handleInputChange}
       />
-      <div className="slider">
+      <div className="slider" style={props.styleSlider}>
         <Range
           values={values}
           step={props.step}

From 3fa8e7e3c6971987c7271bf0adb7e1967006e395 Mon Sep 17 00:00:00 2001
From: Min-Hsueh Chiu <peter810601@gmail.com>
Date: Thu, 5 Feb 2026 10:43:13 -0800
Subject: [PATCH 2/2] add customized styling

---
 .../data-entry/DualRangeSlider/DualRangeSlider.tsx   | 12 +++++++++++-
 .../data-entry/FilterField/FilterField.tsx           |  6 +++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/data-entry/DualRangeSlider/DualRangeSlider.tsx b/src/components/data-entry/DualRangeSlider/DualRangeSlider.tsx
index 364442e3..b9bee5f5 100644
--- a/src/components/data-entry/DualRangeSlider/DualRangeSlider.tsx
+++ b/src/components/data-entry/DualRangeSlider/DualRangeSlider.tsx
@@ -75,6 +75,14 @@ export interface DualRangeSliderProps {
    * This can be used to lift the new "nice" domain upwards.
    */
   onPropsChange?: (props: any) => void;
+  /**
+   * styles for input
+   */
+  styleInput?: object;
+  /**
+   * styles for slider
+   */
+  styleSlider?: object;
 }
 
 /**
@@ -343,6 +351,7 @@ export const DualRangeSlider: React.FC<DualRangeSliderProps> = ({
           <input
             data-testid="lower-bound-input"
             className="input is-small"
+            style={props.styleInput}
             type="number"
             value={lowerBound}
             min={scale.domain()[0]}
@@ -355,6 +364,7 @@ export const DualRangeSlider: React.FC<DualRangeSliderProps> = ({
           <input
             data-testid="upper-bound-input"
             className="input is-small"
+            style={props.styleInput}
             type="number"
             value={upperBound}
             min={scale.domain()[0]}
@@ -364,7 +374,7 @@ export const DualRangeSlider: React.FC<DualRangeSliderProps> = ({
           />
         </div>
       </div>
-      <div className="slider">
+      <div className="slider" style={props.styleSlider}>
         <Range
           values={values}
           step={step}
diff --git a/src/components/data-entry/FilterField/FilterField.tsx b/src/components/data-entry/FilterField/FilterField.tsx
index 437b3988..fbdc3e3d 100644
--- a/src/components/data-entry/FilterField/FilterField.tsx
+++ b/src/components/data-entry/FilterField/FilterField.tsx
@@ -30,6 +30,10 @@ interface FilterFieldProps {
    */
   active?: boolean;
   resetFilter?: (id: any) => any;
+  /**
+   * styles for label
+   */
+  styleLabel?: object;
 }
 
 /**
@@ -74,7 +78,7 @@ export const FilterField: React.FC<FilterFieldProps> = ({ dois = [], ...otherPro
   return (
     <div id={props.id} className={classNames('mpc-filter-field', props.className)}>
       {props.label && (
-        <div className="mpc-filter-label">
+        <div className="mpc-filter-label" style={props.styleLabel}>
           {renderFilterLabel()}
           {props.dois.map((doi, i) => (
             <PublicationButton key={`${i}-${doi}`} doi={doi} compact className="tag ml-2" />