diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
index 104e49f1eaf..9424b23b046 100644
--- a/src/common/components/comment/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -586,7 +586,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-556d41f8-5964-432a-b66d-9dce8f906a76"
+      id="editor-tool-emoji-picker-4ccdcb56-8dff-4dfe-9898-dfdf7c3d7fc6"
       role="none"
       title="Emoji"
     >
diff --git a/src/common/components/decks/columns/helpers/_helpers.scss b/src/common/components/decks/columns/helpers/_helpers.scss
index 145a8a751f3..12ca96a7382 100644
--- a/src/common/components/decks/columns/helpers/_helpers.scss
+++ b/src/common/components/decks/columns/helpers/_helpers.scss
@@ -29,19 +29,16 @@
 
       .slider {
         grid-area: slider;
-
-        > div {
-          @apply w-full bg-gray-300 dark:bg-dark-default;
-
-          > div:first-child {
-            @apply bg-blue-dark-sky;
-          }
-        }
       }
 
       .estimated {
         grid-area: price;
         text-align: left;
+        position: absolute;
+        top: 1.5rem;
+        right: 7.5rem;
+        z-index: 20;
+        font-size: .675rem;
       }
 
       .percentage {
@@ -58,16 +55,6 @@
       }
     }
 
-    .voting-controls-down {
-      .slider {
-        > div {
-          > div:first-child {
-            @apply bg-red;
-          }
-        }
-      }
-    }
-
     @media screen and (max-width: 560px) {
       width: calc(100vw - 67px - 24px);
       left: -12px;
diff --git a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
index 8ca621c2516..718e88faa75 100644
--- a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
+++ b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
@@ -41,50 +41,67 @@ Array [
     <div
       className="slider slider-up"
     >
-      <span
-        className="w-full flex [&>div]:w-full"
-        onClick={[Function]}
-        onKeyUp={[Function]}
-        tabIndex={0}
+      <div
+        className="ecency-vote-input relative"
       >
         <div
-          className="css-yvszuv-Slider"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
+          className="ecency-input-group flex items-stretch w-full [&>input]:rounded-[0] [&>input:first-child]:rounded-l-full [&>input:last-child]:rounded-r-full [&>.ecency-input-group-part>button]:rounded-tl-none [&>.ecency-input-group-part>button]:rounded-bl-none [&>.ecency-input-group-part>button]:h-[2.75rem]"
         >
-          <div
-            className="css-3g5hux-Slider"
-            style={
-              Object {
-                "width": "100%",
-              }
-            }
+          <input
+            className="border-2 rounded-3xl py-2 px-3 w-full outline-none shadow-0 focus:border-gray-500 hover:border-gray-300 duration-300 dark:border-gray-700 dark:hover:border-gray-600 dark:bg-gray-800 aria-invalid:border-red"
+            onChange={[Function]}
+            step="0.1"
+            type="number"
+            value={100}
           />
           <div
+            className="ecency-input-group-part ecency-input-group-append border-l-0 rounded-tr-full rounded-br-full dark:border-gray-600 flex items-center justify-center px-2.5 border-2 bg-gray-200 dark:bg-gray-600"
             onClick={[Function]}
-            onMouseDown={[Function]}
-            onTouchStart={[Function]}
-            style={
-              Object {
-                "left": "100%",
-                "position": "absolute",
-                "top": "50%",
-                "transform": "translate(-50%, -50%)",
-              }
-            }
           >
-            <div
-              className="css-1ldz52l-Slider"
-            />
+            %
           </div>
         </div>
-      </span>
+        <div
+          className="absolute right-10 top-0 bottom-0 flex flex-col justify-center items-center"
+        >
+          <div
+            className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
+            onClick={[Function]}
+          >
+            <svg
+              fill="currentColor"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17.71,11.29l-5-5a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-5,5a1,1,0,0,0,1.42,1.42L11,9.41V17a1,1,0,0,0,2,0V9.41l3.29,3.3a1,1,0,0,0,1.42,0A1,1,0,0,0,17.71,11.29Z"
+              />
+            </svg>
+          </div>
+          <div
+            className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
+            onClick={[Function]}
+          >
+            <svg
+              fill="currentColor"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17.71,11.29a1,1,0,0,0-1.42,0L13,14.59V7a1,1,0,0,0-2,0v7.59l-3.29-3.3a1,1,0,0,0-1.42,1.42l5,5a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l5-5A1,1,0,0,0,17.71,11.29Z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
     </div>
     <div
       className="percentage"
-    >
-      100.0%
-    </div>
+    />
     <button
       className="cursor-pointer rounded-full duration-300 no-wrap border-[1.25px] border-solid flex items-center justify-center gap-2 border-red hover:border-red-020 focus:border-red-030 text-red hover:text-red-020 focus:text-red-030 h-[2rem] text-sm font-[500] px-2 text-xs w-8 !p-0"
       onClick={[Function]}
diff --git a/src/common/components/entry-vote-btn/index.tsx b/src/common/components/entry-vote-btn/index.tsx
index 959ac5e691d..b9705696864 100644
--- a/src/common/components/entry-vote-btn/index.tsx
+++ b/src/common/components/entry-vote-btn/index.tsx
@@ -27,7 +27,7 @@ import { _t } from "../../i18n";
 import "./_index.scss";
 import { useMappedStore } from "../../store/use-mapped-store";
 import { Button } from "@ui/button";
-import { ReactInputSliderWrapper } from "../../features/packages-helpers";
+import { InputVote } from "@ui/input";
 
 const setVoteValue = (
   type: "up" | "down" | "downPrevious" | "upPrevious",
@@ -324,12 +324,9 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
               </div>
               <div className="space" />
               <div className="slider slider-up">
-                <ReactInputSliderWrapper
-                  value={upSliderVal}
-                  onChange={(x) => this.upSliderChanged(x)}
-                />
+                <InputVote value={upSliderVal} setValue={(x) => this.upSliderChanged(x)} />
               </div>
-              <div className="percentage">{`${upSliderVal && upSliderVal.toFixed(1)}%`}</div>
+              <div className="percentage" />
               <Button
                 noPadding={true}
                 className="w-8"
@@ -377,13 +374,14 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
                 <FormattedCurrency {...this.props} value={this.estimate(downSliderVal)} fixAt={3} />
               </div>
               <div className="slider slider-down">
-                <ReactInputSliderWrapper
+                <InputVote
+                  mode="negative"
                   value={downSliderVal}
-                  onChange={(x) => this.downSliderChanged(x)}
+                  setValue={(x) => this.downSliderChanged(x)}
                 />
               </div>
               <div className="space" />
-              <div className="percentage">{`${downSliderVal.toFixed(1)}%`}</div>
+              <div className="percentage" />
               <Button
                 noPadding={true}
                 className="w-8"
diff --git a/src/common/features/ui/input/_input-vote.scss b/src/common/features/ui/input/_input-vote.scss
new file mode 100644
index 00000000000..4c24125b10f
--- /dev/null
+++ b/src/common/features/ui/input/_input-vote.scss
@@ -0,0 +1,19 @@
+.entry-list-item .item-body .item-controls .ecency-vote-input svg {
+  max-width: 16px;
+  width: 16px;
+  height: 16px !important;
+  max-height: 16px;
+}
+
+.ecency-vote-input {
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type=number] {
+    background-color: transparent;
+    -moz-appearance: textfield;
+  }
+}
\ No newline at end of file
diff --git a/src/common/features/ui/input/index.ts b/src/common/features/ui/input/index.ts
index c55a778e1b0..a6ad43ed63d 100644
--- a/src/common/features/ui/input/index.ts
+++ b/src/common/features/ui/input/index.ts
@@ -2,3 +2,4 @@ export * from "./input-group";
 export * from "./input-group-copy-clipboard";
 export * from "./form-controls";
 export * from "./code-input";
+export * from "./input-vote";
diff --git a/src/common/features/ui/input/input-vote.tsx b/src/common/features/ui/input/input-vote.tsx
new file mode 100644
index 00000000000..f0b72cfffc3
--- /dev/null
+++ b/src/common/features/ui/input/input-vote.tsx
@@ -0,0 +1,122 @@
+import { Input } from "@ui/input/form-controls/input";
+import React, {
+  MouseEvent,
+  PropsWithChildren,
+  TouchEvent,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { UilArrowDown, UilArrowUp } from "@iconscout/react-unicons";
+import "./_input-vote.scss";
+import { InputGroup } from "@ui/input/input-group";
+import useInterval from "react-use/lib/useInterval";
+import { classNameObject } from "../../../helper/class-name-object";
+
+interface Props {
+  value: number;
+  setValue: (v: number) => void;
+  mode?: "positive" | "negative";
+}
+
+function ArrowButton({ children, onClick }: PropsWithChildren<{ onClick: () => void }>) {
+  const [fireInterval, setFireInterval] = useState(false);
+
+  useInterval(() => onClick(), fireInterval ? 300 : null);
+
+  return (
+    <div
+      className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
+      onClick={() => {
+        setFireInterval(false);
+        onClick();
+      }}
+      onMouseDown={() => setFireInterval(true)}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function InputVote({ value, setValue, mode = "positive" }: Props) {
+  const mouseDownInitiatedRef = useRef(false);
+
+  const [startPosition, setStartPosition] = useState(0);
+  const [originalValue, setOriginalValue] = useState(0);
+
+  useEffect(() => {
+    if (value < 0) {
+      setValue(0);
+    } else if (value > 100) {
+      setValue(100);
+    } else {
+      setValue(value);
+    }
+  }, [value]);
+
+  const onTouchMove = (e: TouchEvent) => {
+    const touch = e.touches.item(0);
+    if (touch) {
+      const diff = Math.max(-200, Math.min(200, touch.clientX - startPosition));
+      setValue(Math.min(100, Math.max(0, originalValue + diff)));
+    }
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (mouseDownInitiatedRef.current) {
+      const diff = Math.max(-200, Math.min(200, e.clientX - startPosition));
+      setValue(Math.min(100, Math.max(0, originalValue + diff)));
+    }
+  };
+
+  return (
+    <div
+      className="ecency-vote-input rounded-full overflow-hidden relative"
+      onTouchStart={(e) => {
+        setStartPosition(e.touches.item(0)?.clientX);
+        setOriginalValue(value);
+        document.body.classList.add("overflow-hidden");
+      }}
+      onTouchMove={onTouchMove}
+      onTouchEnd={() => document.body.classList.remove("overflow-hidden")}
+      onMouseDown={(e) => {
+        mouseDownInitiatedRef.current = true;
+        setStartPosition(e.clientX);
+        setOriginalValue(value);
+      }}
+      onMouseMove={onMouseMove}
+      onMouseUp={(e) => (mouseDownInitiatedRef.current = false)}
+    >
+      <InputGroup append="%" className="relative z-10">
+        <Input
+          min={0}
+          max={100}
+          type="number"
+          step="0.1"
+          value={value}
+          onChange={(e) => setValue(+e.target.value)}
+        />
+      </InputGroup>
+
+      <div
+        className={classNameObject({
+          "absolute bg-opacity-25 top-[1px] left-[1px] bottom-[1px]": true,
+          "bg-blue-dark-sky": mode === "positive",
+          "bg-red": mode === "negative"
+        })}
+        style={{
+          width: `${value * 0.86}%`
+        }}
+      />
+
+      <div className="absolute z-[11] right-10 top-0 bottom-0 flex flex-col justify-center items-center">
+        <ArrowButton onClick={() => setValue(value + 0.1)}>
+          <UilArrowUp />
+        </ArrowButton>
+        <ArrowButton onClick={() => setValue(value - 0.1)}>
+          <UilArrowDown />
+        </ArrowButton>
+      </div>
+    </div>
+  );
+}