API tools faq
paste
View difference between Paste ID: vWVuurf2 and ew4CgBBR
SHOW: | | - or go back to the newest paste.
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <title></title>
5
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6
        <style type="text/css">
7
                svg { border: 1px solid #000; margin: 1.5em; }
8
                .slidable { cursor: w-resize; }
9
        </style>
10
    </head>
11
    <body>
12
        <p class="inputs">
13-
            <input type="number" value="370" class='input_1' />
13+
            <input type="number" value="0" class='input_1' />
14-
            <input type="number" value="0" class='input_2' />
14+
            <input type="number" value="630" class='input_2' />
15
        </p>
16
        <svg id="price_chart" width="630" height="390" xmlns="http://www.w3.org/2000/svg">
17
            <defs>
18
                <rect id="rect_01"
19
                     width="330" height="62%"
20
                     rx="10" ry="10"
21
                     stroke="#444"
22
                 />
23
                <rect id="rect_02"
24
                     width="200" height="38%"
25
                     rx="10" ry="10"
26
                     stroke="#444"
27
                 />
28
                <rect id="rect_03"
29
                     width="90" height="84%"
30
                     rx="10" ry="10"
31
                     stroke="#444"
32
                 />
33
                <rect id="rect_slider_bar"
34
                     width="96%" height="14%"
35
                     rx="10" ry="10"
36
                     stroke="#ccc"
37
                 />
38
                <rect id="rect_slider_btn"
39
                     class="slidable"
40
                     width="4%" height="24%"
41
                     y="38%"
42
                     rx="2%" ry="3%"
43-
                     transform="matrix(1 0 0 1 0 0)"
43+
44-
                     onmousedown="selectElement(evt)"

44+
45
                <linearGradient id="green_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">

46
                    <stop stop-color = "#b4ddb4" offset = "0%"/>

47
                    <stop stop-color = "#61c419" offset = "10%"/>

48
                    <stop stop-color = "#299a0b" offset = "80%"/>

49
                    <stop stop-color = "#008a00" offset = "100%"/>

50
                </linearGradient>

51
                <linearGradient id="blue_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">

52
                    <stop stop-color = "#7db9e8" offset = "0%"/>

53
                    <stop stop-color = "#2989d8" offset = "10%"/>

54
                    <stop stop-color = "#1e5799" offset = "80%"/>

55
                </linearGradient>

56
                <linearGradient id="orange_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">

57
                    <stop stop-color = "#ffa84c" offset = "0%"/>

58
                    <stop stop-color = "#ff7b0d" offset = "10%"/>

59
                    <stop stop-color = "#ff7400" offset = "50%"/>

60
                    <stop stop-color = "#ff670f" offset = "90%"/>

61
                    <stop stop-color = "#ff6000" offset = "100%"/>

62
                </linearGradient>

63
                <linearGradient id="white_grad_lin"  x1="0%" y1="50%"  x2="100%" y2="50%">

64
                    <stop stop-color = "#999" offset = "0%"/>

65
                    <stop stop-color = "#fff" offset = "20%"/>

66
                    <stop stop-color = "#fff" offset = "50%"/>

67
                    <stop stop-color = "#ddd" offset = "80%"/>

68
                    <stop stop-color = "#999" offset = "90%"/>

69
                </linearGradient>

70
                <linearGradient id="btm_shading_grad"  x1="50%" y1="0%"  x2="50%" y2="100%">

71
                    <stop stop-color ="#ddd" stop-opacity="0.3" offset="70%"/>

72
                    <stop stop-color ="#999" stop-opacity="0.6" offset="100%"/>

73
                </linearGradient>

74
                <linearGradient id="white_alpha_grad_lin"  x1="50%" y1="0%"  x2="50%" y2="100%">

75
                    <stop stop-color ="#fff" stop-opacity="0.85" offset="0%"/>

76
                    <stop stop-color ="#fff" stop-opacity="0.25" offset="20%"/>

77
                    <stop stop-color ="#fff" stop-opacity="0.55" offset="70%"/>

78
                    <stop stop-color ="#fff" stop-opacity="0.85" offset="100%"/>

79
                </linearGradient>

80
            </defs> 

81
            

82
            <use xlink:href="#rect_01" x="210" y="19%" fill="url(#green_grad_lin)" />

83
            <use xlink:href="#rect_02" x="70" y="31%" fill="url(#blue_grad_lin)" />

84
            <use xlink:href="#rect_03" x="440" y="8%" fill="url(#orange_grad_lin)" />

85
            <use xlink:href="#rect_slider_bar" x="2%" y="43%" fill="url(#white_alpha_grad_lin)" />

86
            <use xlink:href="#rect_slider_btn" id="slider_1" fill="url(#white_grad_lin)" x="160" />

87-
            <use xlink:href="#rect_slider_btn" id="slider_1" x="160" y="38%" fill="url(#white_grad_lin)" />

87+
            <use xlink:href="#rect_slider_btn" id="slider_2" fill="url(#white_grad_lin)" x="370" />

88
        </svg>

89-
            <rect class="slidable" id="slider_2"

89+
90-
                x="370" y="38%"

90+
91-
                width="4%" height="24%" 

91+
92-
                rx="2%" ry="3%"

92+
93-
                stroke="#666"

93+
94-
                fill="url(#white_grad_lin)" />

94+
	function mx(evt){

95
		pt.x = evt.clientX;

96
		return pt.matrixTransform(svg.getScreenCTM().inverse());

97
	}

98
	

99
	// HTML elements

100
        var slider_1  = document.querySelector('#slider_1');

101-
	function mxy(evt){

101+
102
	var input_1 = document.querySelector('.input_1');

103
	var input_2 = document.querySelector('.input_2');

104
	

105
	var scale = 1.0;

106
	var maxValue;

107
108
	//var updateFromInput = function(inputId){

109
	var updateFromInput = function(){

110
                var x = input_1.value*1;

111
		slider_1.x.baseVal.value =  x/scale;

112
		//var input_id = inputId;

113
        	//console.debug(inputId);

114
        	//var x = input_id.value*1;

115
	};

116-
		var x = input_1.value*1;

116+
117
	var updateInputFromSlider = function(){

118-
	};  

118+
		//input_1.value = ( slider_1.x.baseVal.value*scale).toFixed(2);

119
		//input_1.value = ( slider_1.x.baseVal.value*scale).toFixed(4);

120
		input_1.value = ( slider_1.x.baseVal.value*scale).toFixed();

121-
//		input_1.value = ( slider_1.x.baseVal.value*scale).toFixed(2);

121+
122-
//		input_1.value = ( slider_1.x.baseVal.value*scale).toFixed(4);

122+
123
	input_1.addEventListener('input',updateFromInput,false);

124
	input_2.addEventListener('input',updateFromInput,false);

125
//	input_1.addEventListener('input',updateFromInput("input_1"),false);

126
//	input_2.addEventListener('input',updateFromInput("input_2"),false);

127
        

128
	var dragging = false;

129
	slider_1.addEventListener('mousedown',function(evt){

130
		var offset = mx(evt);

131-
		var offset = mxy(evt);

131+
132
		offset.x = slider_1.x.baseVal.value - offset.x;

133
		var move = function(evt){

134-
		offset.y = slider_1.y.baseVal.value;

134+
			var now = mx(evt);

135
			var x = offset.x + now.x;

136-
			var now = mxy(evt);

136+
137
			x = Math.abs(x)*scale;

138
			updateInputFromSlider();

139-
			//var y = -(offset.y + now.y);

139+
140-
			var y = offset.y;  // keep the Y value constant so it only sildes on X axis

140+
141-
			//slider_1.y.baseVal.value = -y; // this 

141+
142-
			slider_1.y.baseVal.value = y;

142+
143-
			x = Math.abs(x)*scale, y=Math.abs(y)*scale;

143+
144
			svg.removeEventListener('mousemove',move,false);

145
		},false);

146
	},false);

147
148
    </script>

149
    <!-- my email is mo @t voyagercomponents d0t com -->

150
    <!-- Also, I threw a copy here for collaboration: http://jsfiddle.net/mOrloff/ucnyz/ -->

151
</html>
        

    


            


                                


        

            



                
    

        Public Pastes
    

    
            

    

                    

        

    





    


    
    
    
    
    
    
    
    




    


    



                

            We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.             OK, I Understand
        

    
                

            

                
                    
                
            

            

                Not a member of Pastebin yet?

                Sign Up, it unlocks many cool features!