搜索

首页  >  问答  >  正文

javascript - Js如何获取<input type="range">的滑块::-webkit-slider-thumb的样式?

如上图,我用css重置了<input type="range">的样式,现在我想获取到滑块的left值,可以实现吗?
代码如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

<code><!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    <title>demo</title>

    <style>

    .range-input {

        position: relative;

    }

    input[type=range] {

        -webkit-appearance: none;

        overflow: hidden;

        width: 100%;

        height: 40px;

        outline: 0;

        background: none;

    }

     

    input[type=range]:focus,

    input[type=range]:active {

        background: none;

    }

    /*滑块*/

     

    input[type=range]::-webkit-slider-thumb {

        -webkit-appearance: none;

        position: relative;

        height: 30px;

        width: 30px;

        border: 0;

        border-radius: 50%;

        background: #fff;

        cursor: pointer;

        -webkit-box-shadow: 0 2px 7px -5px rgba(0, 0, 0, 1);

        box-shadow: 0 2px 7px -5px rgba(0, 0, 0, 1);

    }

     

    input[type="range"]::-webkit-slider-thumb:before,

    input[type="range"]::-webkit-slider-thumb:after {

        position: absolute;

        top: 13px;

        width: 2000px;

        height: 5px;

        content: "";

        pointer-events: none;

        transition: .2s;

    }

     

    input[type="range"]::-webkit-slider-thumb:before {

        left: -2000px;

        background: #de1c16;

    }

     

    input[type="range"]::-webkit-slider-thumb:after {

        left: 30px;

        background: #d9d9d9;

    }

    .range-val {

    position: absolute;

    bottom: -15px;

    left: 0;

    -webkit-transform: translateX(-50%);

    transform: translateX(-50%);

    display: block;

    padding: 5px;

    background: #de1c16;

    color: #fff;

    }

    .range-val:before {

        content: '';

        position: absolute;

        top: -7px;

        left: 50%;

        margin-left: -7px;

        display: block;

        width: 0;

        height: 0;

        border-left: 7px solid transparent;

        border-right: 7px solid transparent;

        border-bottom: 7px solid #de1c16;

    }

    </style>

</head>

 

<body>

    <p class="range-input">

        <input type="range" class="range" min="1000" max="10000" step="1000" value="2000">

        <span class="range-val">2000</span>

    </p>

</body>

 

</html></code>

PHPzPHPz2898 天前520

全部回复(2)我来回复

  • 阿神

    阿神2017-04-10 17:15:39

    1

    2

    3

    4

    5

    6

    7

    8

    9

    <code class="javascript">var range = document.getElementById('range');

    var span = document.getElementById('span');

    var cs = getComputedStyle(range, 0);

    range.onchange = function() {

        span.style.left = ((range.value - 1000) * parseInt(cs.width) / 9000

            + 18 - range.value/300) + "px";

        span.innerHTML = range.value;

    };

    range.onchange();</code>

    回复
    0
  • 黄舟

    黄舟2017-04-10 17:15:39

    建议楼上用
    range.onmousemove = function(){}....

    回复
    0
  • 取消回复