From 4ea506c55950e4e0af986dd0c73fc9e9a8e47e14 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 12 Oct 2019 11:33:40 +0800
Subject: [PATCH] feat(Slider): improve click area (#4701)

---
 src/slider/index.less | 10 ++++++++++
 src/style/var.less    |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/slider/index.less b/src/slider/index.less
index 8828fbf01..026502176 100644
--- a/src/slider/index.less
+++ b/src/slider/index.less
@@ -5,6 +5,16 @@
   background-color: @slider-inactive-background-color;
   border-radius: 999px;
 
+  // use pseudo element to expand click area
+  &::before {
+    position: absolute;
+    top: -@padding-xs;
+    right: 0;
+    bottom: -@padding-xs;
+    left: 0;
+    content: '';
+  }
+
   &__bar {
     position: relative;
     background-color: @slider-active-background-color;
diff --git a/src/style/var.less b/src/style/var.less
index 2272ad806..687cabf3b 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -527,8 +527,8 @@
 @slider-active-background-color: @blue;
 @slider-inactive-background-color: @gray-light;
 @slider-disabled-opacity: @disabled-opacity;
-@slider-button-width: 20px;
-@slider-button-height: 20px;
+@slider-button-width: 24px;
+@slider-button-height: 24px;
 @slider-button-border-radius: 50%;
 @slider-button-background-color: @white;
 @slider-button-box-shadow: 0 1px 2px rgba(0, 0, 0, .5);