"Updated ToolBar component: added zoom level limits, refactored zoom level handling, and modified CSS styles for input and slider elements."

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -2,6 +2,10 @@ require('./toolBar.less');
 const React = require('react');
 const { useState, useEffect } = React;
 
+const maxZoom = 300;
+const minZoom = 10;
+const zoomStep = 10;
+
 const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
     const [state, setState] = useState({
         currentPage: currentPage,
@@ -26,21 +30,22 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
     const setZoomLevel = (direction) => {
         let zoomLevel = state.zoomLevel;
         if (direction === 'in') {
-            zoomLevel += 10;
+            zoomLevel += zoomStep;
         } else {
-            zoomLevel -= 10;
+            zoomLevel -= zoomStep;
         }
 
         setState((prevState) => ({
             ...prevState,
-            zoomLevel,
+            zoomLevel: zoomLevel,
+            zoomInput: zoomLevel,
         }));
     };
 
     const handleInputChange = (value, type) => {
         const newValue = parseInt(value, 10);
 
-        if (type === 'zoom' && newValue >= 10 && newValue <= 300) {
+        if (type === 'zoom' && newValue >= minZoom && newValue <= maxZoom) {
             setState((prevState) => ({
                 ...prevState,
                 zoomInput: newValue,
@@ -57,20 +62,21 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
         <div className="toolBar">
             <div className="tool">
                 <button
-                    onClick={() => setZoomLevel('in')}
+                    onClick={() => setZoomLevel('out')}
-                    disabled={state.zoomLevel >= 300}
+                    disabled={state.zoomLevel <= minZoom}
                 >
-                    Zoom In
+                    Zoom Out
                 </button>
             </div>
-
             <div className="tool">
                 <input
-                    className='slider'
+                    className="slider"
                     type="range"
                     name="zoom"
-                    min={10}
+                    list="zoomLevels"
-                    max={300}
+                    min={minZoom}
+                    max={maxZoom}
+                    step={zoomStep}
                     value={state.zoomInput}
                     onChange={(e) => handleInputChange(e.target.value, 'zoom')}
                     onMouseUp={(e) => {
@@ -85,17 +91,27 @@ const ToolBar = ({ updateZoom, currentPage, onPageChange, totalPages }) => {
                         }
                     }}
                 />
+                <datalist id="zoomLevels">
+                    {Array.from(
+                        {
+                            length:
+                                Math.floor((maxZoom - minZoom) / zoomStep) + 1,
+                        },
+                        (_, i) => minZoom + i * zoomStep
+                    ).map((option) => (
+                        <option key={option} value={option} />
+                    ))}
+                </datalist>
             </div>
 
             <div className="tool">
                 <button
-                    onClick={() => setZoomLevel('out')}
+                    onClick={() => setZoomLevel('in')}
-                    disabled={state.zoomLevel <= 10}
+                    disabled={state.zoomLevel >= maxZoom}
                 >
-                    Zoom Out
+                    Zoom In
                 </button>
             </div>
-
             <div className="tool">
                 <button
                     className="previousPage"

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -31,32 +31,60 @@
 		border-radius  : 7px;
 
 		&.slider {
-			appearance: none;
 			width      : 100%; 
-  			height: 5px;
+			height     : 7px;
-  			background: #d3d3d3; 
+			appearance : none;
-  			outline: none;
+			background : #D3D3D3;
 			isolation  : isolate; 
+			outline    : none;
   
 			&::-webkit-slider-thumb {
-				appearance: none;
+				width            : 8px; 
-  				width: 7px; 
 				height           : 15px;
-  				background-color: rgb(39, 174, 96);
+				appearance       : none;
 				cursor           : pointer; 
+				background-color : rgb(39, 174, 96);
+				translate        : 0 -66%; 
+			}
+			&::-moz-slider-thumb {
+				width            : 8px; 
+				height           : 15px;
+				appearance       : none;
+				cursor           : pointer; 
+				background-color : rgb(39, 174, 96); 
 			}
 
 			&::before {
-				content: '';
 				position         : absolute;
 				top              : 50%;
 				left             : 33.33%;
-				transform: translate(-50%, -50%);
+				z-index          : -1;
 				width            : 7px;
 				height           : 15px;
-				background-color: #d3d3d3;
+				content          : '';
-				z-index: -1;
+				background-color : #D3D3D3;
+				transform        : translate(-50%, -50%);
 			}
+			
+		}
+	}
+
+	.tool {
+		&:hover .slider::after {
+			position         : absolute;
+			bottom           : -30px;
+			left             : 50%;
+			z-index          : 1;
+			display          : grid;
+			place-items      : center;
+			width            : 4ch;
+			height           : 1.2lh;
+			pointer-events   : none;
+			content          : attr(value);
+			background-color : #D3D3D3;
+			border           : 1px solid #A1A1A1;
+			border-radius    : 5px;
+			transform        : translate(-50%, 50%);
 		}
 	}